/* -------------------------------------------------------
   React Data Grid v6 - Clean Local Stylesheet
   (No external assets; neutral, app-friendly look)
   ------------------------------------------------------- */

/* Container / layout */
.react-grid-Container,
.react-grid-Main {
    height: 100%;
}

.react-grid-Grid {
    position: relative;
    box-sizing: border-box;
    border: 1px solid #e5e7eb; /* gray-200 */
    background: #ffffff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    color: #111827; /* gray-900 */
}

/* Header */
.react-grid-Header {
    position: relative;
    z-index: 1;
    background: #f8fafc; /* slate-50 */
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

.react-grid-HeaderRow {
    display: flex;
    align-items: stretch;
    height: 36px;
}

.react-grid-HeaderCell {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    border-right: 1px solid #eef2f7; /* light divider */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 600;
    user-select: none;
    background: #f8fafc;
}

    .react-grid-HeaderCell:last-child {
        border-right: 0;
    }

.react-grid-HeaderCell--frozen {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f8fafc;
    box-shadow: 1px 0 0 0 #e5e7eb inset;
}

/* Sort indicators (optional minimal look) */
.react-grid-HeaderCell .sortable {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.react-grid-HeaderCell .sort-desc::after,
.react-grid-HeaderCell .sort-asc::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.react-grid-HeaderCell .sort-asc::after {
    border-bottom: 6px solid #6b7280; /* gray-500 */
}

.react-grid-HeaderCell .sort-desc::after {
    border-top: 6px solid #6b7280;
}

/* Viewport / body */
.react-grid-Viewport {
    position: relative;
    outline: none;
    background: #ffffff;
}

.react-grid-Canvas {
    position: relative;
    will-change: transform;
}

.react-grid-Row {
    display: flex;
    align-items: stretch;
    height: 35px; /* matches minHeight heuristic in our JS */
    border-bottom: 1px solid #f1f5f9; /* slate-100 */
    background: #ffffff;
}

.react-grid-Row--even {
    background: #fbfdff; /* very light alternate */
}

.react-grid-Row:hover .react-grid-Cell {
    background: #fafafa;
}

/* Cells */
.react-grid-Cell {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 6px 10px;
    border-right: 1px solid #f1f5f9;
    min-width: 0; /* allow ellipsis */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background: inherit;
    color: inherit;
}

    .react-grid-Cell:last-child {
        border-right: 0;
    }

    /* Focus / selection */
    .react-grid-Cell:focus {
        outline: 2px solid #93c5fd; /* blue-300 */
        outline-offset: -2px;
    }

.react-grid-Cell--selected {
    background: #eef6ff; /* soft blue */
    box-shadow: inset 0 0 0 2px #93c5fd;
}

/* Editable cells */
.react-grid-Cell__value {
    flex: 1 1 auto;
    min-width: 0;
}

.react-grid-Cell input[type="text"],
.react-grid-Cell input[type="number"],
.react-grid-Cell select,
.react-grid-Cell textarea {
    width: 100%;
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 6px;
    padding: 6px 8px;
    background: #fff;
    color: #111827;
    font: inherit;
}

    .react-grid-Cell input:focus,
    .react-grid-Cell select:focus,
    .react-grid-Cell textarea:focus {
        outline: none;
        border-color: #60a5fa; /* blue-400 */
        box-shadow: 0 0 0 3px rgba(96,165,250,.25);
    }

/* Frozen columns */
.react-grid-Cell--frozen {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
    box-shadow: 1px 0 0 0 #e5e7eb inset;
}

/* Resizing handle (if enabled by your build) */
.react-grid-HeaderCell .drag-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
}

    .react-grid-HeaderCell .drag-handle:hover {
        background: rgba(0,0,0,.075);
    }

/* Toolbar (if used) */
.react-grid-Toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

    .react-grid-Toolbar button,
    .react-grid-Toolbar .btn {
        appearance: none;
        border: 1px solid #d1d5db;
        background: #ffffff;
        padding: .4rem .7rem;
        border-radius: 8px;
        cursor: pointer;
        font: inherit;
    }

        .react-grid-Toolbar button:hover {
            background: #f3f4f6;
        }

/* Row selection checkbox (if present) */
.react-grid-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid #cbd5e1; /* slate-300 */
    border-radius: 4px;
    background: #fff;
}

    .react-grid-checkbox input {
        display: none;
    }

.react-grid-checkbox--checked {
    background: #2563eb; /* blue-600 */
    border-color: #2563eb;
}

    .react-grid-checkbox--checked::after {
        content: '';
        display: block;
        width: 6px;
        height: 10px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

/* Scrollbars (WebKit) — optional, subtle */
.react-grid-Viewport::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.react-grid-Viewport::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

    .react-grid-Viewport::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

.react-grid-Viewport::-webkit-scrollbar-track {
    background: #f1f5f9;
}

/* Compact density option (add class to grid container) */
.react-grid-Grid.is-compact .react-grid-Row {
    height: 30px;
}

.react-grid-Grid.is-compact .react-grid-HeaderRow {
    height: 32px;
}

.react-grid-Grid.is-compact .react-grid-Cell {
    padding: 4px 8px;
}

/* High-contrast focus utility (opt-in) */
.react-grid-Grid.is-strong-focus .react-grid-Cell:focus {
    outline: 2px solid #2563eb; /* blue-600 */
    outline-offset: -2px;
    box-shadow: inset 0 0 0 2px #bfdbfe; /* blue-200 */
}

/* Empty-state helper (optional, if you render one) */
.rdg-empty {
    padding: 2rem;
    text-align: center;
    color: #6b7280; /* gray-500 */
}