/* Excel-like editable grid (ExcelGrid.razor). Selection classes (eg-active/eg-selected) are toggled
   by excelGrid.js; dirty/error state comes from C# via data-dirty / data-error attributes. */

.eg-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.eg-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.eg-btn {
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.eg-btn:hover:not(:disabled) {
    background: #f4f6f8;
}

.eg-btn:disabled {
    opacity: .5;
    cursor: default;
}

.eg-btn-primary {
    background: var(--mud-palette-primary, #1976d2);
    border-color: var(--mud-palette-primary, #1976d2);
    color: #fff;
}

.eg-btn-primary:hover:not(:disabled) {
    filter: brightness(.95);
    background: var(--mud-palette-primary, #1976d2);
}

.eg-status-msg {
    font-size: 13px;
    color: #475467;
}

.eg-status-error {
    color: #b42318;
    font-weight: 600;
}

.eg-status-warn {
    color: #b54708;
    font-weight: 600;
}

.eg-filter {
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #344054;
    width: 220px;
    outline: none;
}

.eg-filter:focus {
    border-color: var(--mud-palette-primary, #1976d2);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, .12);
}

.eg-hint {
    margin-left: auto;
    font-size: 12px;
    color: #98a2b3;
}

.eg-root {
    position: relative; /* containing block for the absolutely-positioned fill handle */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: calc(100vh - 360px);
    overflow: auto;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
    outline: none;
    background: #fff;
}

/* Fixed-height variant: keeps the grid (and therefore the dialog) a constant
   size regardless of row count instead of growing/shrinking to fit content.
   Used by the spreadsheet bulk-edit dialog. */
.eg-fixed-height .eg-root {
    height: calc(100vh - 360px);
}

/* Fill-height variant: the grid takes whatever vertical space its flex parent leaves, rather than
   the fixed pixel budget .eg-fixed-height assumes. Use it when the content ABOVE the grid varies in
   height — a fixed budget then overflows its container and you get two scrollbars (the grid's and
   the container's). Here the grid absorbs the slack, so the container never needs to scroll.
   Every ancestor between the height-bounded container and this element must be a flex column with
   min-height:0, or the grid can't shrink below its natural content height. */
.eg-fill-height {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.eg-fill-height > .eg-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.eg-fill-height .eg-root {
    flex: 1 1 auto;
    max-height: none;
    min-height: 160px; /* never collapse to nothing on a short viewport */
}

/* Excel-style fill handle — the draggable corner square at the bottom-right of the selection.
   The element itself is a generous (14px) transparent grab zone; the visible square is drawn
   smaller and centred via ::after, so it's easy to grab without looking oversized. */
.eg-fill-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: transparent;
    cursor: crosshair;
    z-index: 6;
    display: none;
}

.eg-fill-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    background: var(--mud-palette-primary, #1976d2);
    border: 1px solid #fff;
    box-sizing: border-box;
}

.eg-fill-handle:hover::after {
    transform: translate(-50%, -50%) scale(1.15);
}

/* Excel-style "Copy Cells / Fill Series" tag — a small button that appears just below-right of the
   fill end-point after a numeric drag. Clicking it opens the mode menu. */
.eg-fill-options {
    position: absolute;
    display: none; /* toggled to flex by JS */
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 1px solid #b0b7c3;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    cursor: pointer;
    z-index: 7;
}

.eg-fill-options::after {
    /* down-caret glyph */
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--mud-palette-primary, #1976d2);
}

.eg-fill-options:hover {
    background: #f2f5fb;
}

.eg-fill-options-menu {
    position: absolute;
    display: none; /* toggled to block by JS */
    min-width: 140px;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    padding: 4px 0;
    z-index: 8;
    font-size: 13px;
    user-select: none;
}

.eg-fill-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.eg-fill-opt:hover {
    background: #f2f5fb;
}

.eg-fill-radio {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border: 1px solid #98a2b3;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
}

.eg-fill-opt-active .eg-fill-radio {
    border-color: var(--mud-palette-primary, #1976d2);
}

.eg-fill-opt-active .eg-fill-radio::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-primary, #1976d2);
}

/* Excel-style dropdown button, shown on the active cell of a dropdown column. Positioned by JS at
   the cell's right edge; clicking it opens the picker. */
.eg-dropdown-caret {
    position: absolute;
    display: none;
    z-index: 6;
    background: var(--mud-palette-primary, #1976d2);
    border-left: 1px solid #fff;
    box-sizing: border-box;
    cursor: pointer;
}

.eg-dropdown-caret::after {
    content: "▾";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

/* Cells the fill will write into, previewed live during the drag. The extra attribute-qualified
   selectors raise specificity so the preview wins over the dirty/error cell backgrounds and
   box-shadows (otherwise dragging over empty required cells shows no highlight at all). */
.eg-cell.eg-fill-preview,
.eg-cell.eg-fill-preview[data-dirty="true"],
.eg-cell.eg-fill-preview[data-error="true"] {
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary, #1976d2);
    background: rgba(25, 118, 210, .16);
}

.eg-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    /* width is the exact sum of column widths — NOT min-width:100%, which would force the table to
       fill the container and redistribute every resize across all columns (making a drag feel like it
       moves the wrong way). Columns keep their explicit widths; a narrow table just leaves trailing space. */
    width: max-content;
    font-size: 13px;
    color: #1d2939;
    user-select: none;
}

/* Header */
.eg-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f9fafb;
    border-bottom: 1px solid #e4e7ec;
    border-right: 1px solid #eef0f3;
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    color: #475467;
    white-space: nowrap;
    position: -webkit-sticky;
}

.eg-th {
    position: relative;
}

.eg-sortable {
    cursor: pointer;
}

.eg-sortable:hover {
    background: #f2f4f7;
}

.eg-sort {
    margin-left: 4px;
    font-size: 10px;
    color: #667085;
}

.eg-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
}

.eg-rowhead-th {
    width: 44px;
    left: 0;
    z-index: 4 !important;
    cursor: pointer;
    position: relative;
}

/* Excel-style "select all" triangle in the top-left corner. */
.eg-rowhead-th::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    border-style: solid;
    border-width: 0 0 8px 8px;
    border-color: transparent transparent #98a2b3 transparent;
}

.eg-rowhead-th:hover::after {
    border-color: transparent transparent var(--mud-palette-primary, #1976d2) transparent;
}

/* Row header (number) column */
.eg-rowhead {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #f9fafb;
    border-right: 1px solid #e4e7ec;
    border-bottom: 1px solid #f2f4f7;
    text-align: center;
    color: #98a2b3;
    font-size: 12px;
    padding: 0 6px;
    width: 44px;
}

/* Cells */
.eg-cell {
    border-bottom: 1px solid #f2f4f7;
    border-right: 1px solid #f2f4f7;
    padding: 0;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #fff;
}

.eg-cell .eg-text {
    display: block;
    padding: 6px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ghost text in an empty cell (e.g. the AssetNo the server will auto-assign). Informational
   only — the cell is genuinely empty, so it must read as clearly lighter than typed content.
   Fixed grey rather than a Mud palette var: this grid hardcodes a white cell background and has
   no dark-theme overrides, so a theme-aware colour would go light-on-white in dark mode. */
.eg-cell .eg-text-placeholder {
    color: rgba(0, 0, 0, 0.38);
    font-style: italic;
}

.eg-cell-bool {
    text-align: center;
}

.eg-bool {
    margin: 6px auto;
    cursor: pointer;
}

/* In-cell editor */
.eg-editor {
    width: 100%;
    height: 30px;
    border: none;
    outline: 2px solid var(--mud-palette-primary, #1976d2);
    outline-offset: -2px;
    padding: 0 6px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
}

select.eg-editor {
    appearance: auto;
}

/* Selection painted by JS — selected cells get a light fill; the single border around the whole
   range is drawn by the .eg-selection-box overlay, and the active cell stays white (Excel-style). */
.eg-cell.eg-selected {
    background: rgba(25, 118, 210, .10);
}

.eg-cell.eg-active,
.eg-cell.eg-active.eg-selected {
    background: #fff;
}

/* The selection box — one solid border around the whole selected range. */
.eg-selection-box {
    position: absolute;
    border: 2px solid var(--mud-palette-primary, #1976d2);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 4;
    display: none;
}

/* Dirty / error from C# */
.eg-cell[data-dirty="true"] {
    background: #fffbeb;
}

.eg-cell[data-dirty="true"].eg-selected {
    background: #fef3c7;
}

.eg-cell[data-error="true"] {
    background: #fef3f2;
    box-shadow: inset 0 0 0 1px #f97066;
}

.eg-row-invalid .eg-rowhead {
    color: #b42318;
    background: #fef3f2;
    font-weight: 700;
}

/* System-owned (read-only) rows: greyed and visibly non-editable. */
.eg-row-locked .eg-cell {
    background: #f5f6f8;
    color: #98a2b3;
}

.eg-row-locked .eg-cell {
    cursor: not-allowed;
}

.eg-row-locked .eg-rowhead {
    background: #eceef1;
    color: #98a2b3;
}

/* Read-only COLUMNS (e.g. round-trip context columns): muted but still selectable/copyable. */
.eg-cell-readonly {
    background: #f5f6f8;
    color: #98a2b3;
    cursor: default;
}