/* ============================================================
   MPG FLEXGRID — CLEAN BASELINE (FINAL VERSION)
   ============================================================ */

/* ------------------------------------------------------------
   OUTER WRAPPER — resizable shell
   ------------------------------------------------------------ */
.mpg-grid-wrapper {
    display: flex;
    flex-direction: column;
    resize: both;
    overflow: hidden;
    width: 800px;
    height: 500px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* ------------------------------------------------------------
   TABLE CONTAINER — fills wrapper
   ------------------------------------------------------------ */
.mpg-table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ------------------------------------------------------------
   FLEXGRID WRAPPER — THIS IS THE SCROLL CONTAINER
   ------------------------------------------------------------ */
.flexgrid-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto; /* scrollbars live here */
}

/* ------------------------------------------------------------
   HEADER — sticky inside scroll container
   ------------------------------------------------------------ */
.flexgrid-header {
    display: grid;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #d5a2e8;
    border-bottom: 1px solid #aaa;
}

/* ------------------------------------------------------------
   BODY — grows naturally, no scrolling here
   ------------------------------------------------------------ */
.flexgrid-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: visible;
}

/* ------------------------------------------------------------
   ROWS
   ------------------------------------------------------------ */
.flexgrid-row {
    display: grid;
}

/* Alternating row colors */
.flexgrid-row:nth-child(even) {
    background: #f5f5f5;
}

/* Selected row highlight */
.flexgrid-row.mpg-selected .flexgrid-cell {
    background: #ffe9e9 !important;
}

/* ------------------------------------------------------------
   CELLS
   ------------------------------------------------------------ */
.flexgrid-cell {
    border: 1px solid #A8A7A7;
    padding: 4px 6px;
    /*font-size: 6px;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover expansion */
.flexgrid-cell:hover {
    white-space: normal;
    overflow: visible;
    background: #fff;
    position: relative;
    z-index: 20;
    box-shadow: 0 0 6px rgba(0,0,0,0.25);
}

/* ------------------------------------------------------------
   COLUMN RESIZER
   ------------------------------------------------------------ */
.col-resizer {
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 50;
}

.mpg-header-cell {
    position: relative;
}

/* Body cursor during resize */
body.mpg-resizing {
    cursor: col-resize;
    user-select: none;
}

/* ------------------------------------------------------------
   FOOTER (buttons + search)
   ------------------------------------------------------------ */
.mpg-footer-left,
.mpg-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
}

/* ------------------------------------------------------------
   BUTTON STYLING
   ------------------------------------------------------------ */
.mpg-grid-wrapper button {
    all: unset;
    display: inline-block;
    background-color: #00ff2a;
    color: #000;
    padding: 3px 8px;
    /*font-size: 24px;*/
    border: none;
    cursor: pointer;
    border-radius: 3px;
}