/* Strong, scoped overrides for the runsheet child grid header */
.runsheet-child-grid [class*="dxgvHeader"],
.runsheet-child-grid [class*="dxgvHeader"] * ,
.runsheet-child-grid [class*="dxgvColumnHeader"],
.runsheet-child-grid [class*="dxgvHeaderRow"]
{
    background-image: none !important;
    background-color: #24125f !important; /*#4a4a7e*/
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

/* Specific header cell wrappers and inner content */
.runsheet-child-grid .dxgvTable .dxgvHeader td,
.runsheet-child-grid .dxgvTable .dxgvColumnHeader,
.runsheet-child-grid .dxgvTable .dxgvHeader .dxHeaderContent,
.runsheet-child-grid .dxgvTable .dxgvHeader .dxgvHeaderFilter,
.runsheet-child-grid .dxgvTable .dxgvHeader .dxgvFilterRow
{
    background-image: none !important;
    background-color: #24125f !important; /*#4a4a7e*/
    color: #fff !important;
    padding-left: 10px !important;
    border: none !important;
}

/* Remove white backgrounds from any header editors/inputs that create the white box */
.runsheet-child-grid .dxgvHeader .dxEditor,
.runsheet-child-grid .dxgvHeader input,
.runsheet-child-grid .dxgvHeader .dxTextBox,
.runsheet-child-grid .dxgvHeader .dxHeaderContent > div,
.runsheet-child-grid .dxgvHeader .dxHeaderContent > span
{
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Keep data cells unaffected except font */
.runsheet-child-grid td,
.runsheet-child-grid .dxgvDataRow td {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 11px !important;
    color: #000 !important;
    /*background-color: #f00f !important;*/
}

/* --- Header cell hover to highlight the specific heading (matches parent grid behavior) --- */
/* high specificity to override DevExpress theme */
.runsheet-child-grid .dxgvTable th,
.runsheet-child-grid .dxgvTable td.dxgvHeader,
.runsheet-child-grid .dxgvTable .dxgvColumnHeader,
.runsheet-child-grid .dxgvHeaderRow th,
.runsheet-child-grid .dxgvHeaderRow td
{
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
    -webkit-transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
    will-change: background-color, color;
}

/* Hover state — tweak color/contrast to match parent grid */
.runsheet-child-grid .dxgvTable th:hover,
.runsheet-child-grid .dxgvTable td.dxgvHeader:hover,
.runsheet-child-grid .dxgvTable .dxgvColumnHeader:hover,
.runsheet-child-grid .dxgvHeaderRow th:hover,
.runsheet-child-grid .dxgvHeaderRow td:hover
{
    background-color: #3a2a7e !important; /* slightly lighter/different tint */
    color: #ffffff !important;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.06) !important;
    cursor: default !important;
}

/* Ensure inner header text/icons inherit hover color */
.runsheet-child-grid .dxgvTable th:hover *,
.runsheet-child-grid .dxgvTable td.dxgvHeader:hover *,
.runsheet-child-grid .dxgvTable .dxgvColumnHeader:hover *
{
    color: #ffffff !important;
}

/* If DevExpress uses nested div/span for header text, make them fill cell so hover is consistent */
.runsheet-child-grid .dxgvTable th .dxHeaderContent,
.runsheet-child-grid .dxgvTable td.dxgvHeader .dxHeaderContent,
.runsheet-child-grid .dxgvTable .dxgvColumnHeader .dxHeaderContent
{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1.2 !important;
}

/* Optional: subtle focus outline for keyboard navigation (accessible) */
.runsheet-child-grid .dxgvTable th:focus,
.runsheet-child-grid .dxgvTable td.dxgvHeader:focus
{
    outline: 2px solid rgba(255,255,255,0.12) !important;
    outline-offset: -2px !important;
}

/* Add this near other grid overrides. High-specificity rule to override DevExpress theme defaults. */
.runsheet-child-grid .runsheet-child-grid-header,
.runsheet-child-grid .runsheet-child-grid-header th,
.runsheet-child-grid .runsheet-child-grid-header td,
.runsheet-child-grid .dxgvHeader td,
.runsheet-child-grid .dxgvHeader th {
  /* apply a visible left padding for header cells */
  padding-left: 4px !important;
}

/* If header content is wrapped inside an inner element, also target inner divs */
.runsheet-child-grid .runsheet-child-grid-header > div,
.runsheet-child-grid .dxgvHeader > div {
  padding-left: 4px !important;
}



/* NEW IN TESTING */
/* Remove extra whitespace around child grid when rendered inside DevExpress preview/preview cell */
.runsheet-child-grid,
.runsheet-child-grid .dxgvControl,
.runsheet-child-grid .dxgvTable,
.runsheet-child-grid .dxgvHeader,
.runsheet-child-grid .dxgvHeaderTable {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* DevExpress preview wrapper cells often add padding — remove it */
.dxgvPreview .dxgvPreviewCell,
.dxgvPreviewRow .dxgvPreviewCell,
.runsheet-child-grid .dxgvPreviewCell {
  padding: 0 !important;
  margin: 0 !important;
}

/* Keep header cell content padding you want, but override theme defaults if required */
.runsheet-child-grid .dxgvHeader td,
.runsheet-child-grid .dxgvHeader th {
  padding-left: 12px !important; /* adjust to taste */
  padding-right: 12px !important;
}

/* Remove DevEx detail-row bottom divider for the runsheet child grid */
/*.runsheet-child-grid .dxgvDetailRow_TPSRetail td.dxgv,
.runsheet-child-grid .dxgvAdaptiveDetailRow_TPSRetail td.dxgv,
.runsheet-child-grid .dxgvPreviewRow_TPSRetail td.dxgv,
.runsheet-child-grid .dxgvEditFormDisplayRow_TPSRetail td.dxgv,
.runsheet-child-grid td.dxgvDetailCell_TPSRetail {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}*/

/* Force remove DevEx bottom divider inside runsheet child grid (TitlePlantSoftwarev3) */
/*.runsheet-child-grid .dxgvDetailRow_TitlePlantSoftwarev3 td.dxgv,
.runsheet-child-grid .dxgvAdaptiveDetailRow_TitlePlantSoftwarev3 td.dxgv,
.runsheet-child-grid .dxgvPreviewRow_TitlePlantSoftwarev3 td.dxgv,
.runsheet-child-grid .dxgvEditFormDisplayRow_TitlePlantSoftwarev3 td.dxgv,
.runsheet-child-grid td.dxgvDetailCell_TitlePlantSoftwarev3,
.runsheet-child-grid td.dxgv*/ /* fallback for any dxgv cell inside runsheet-child-grid */ /*{
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}*/

/* Target the single TD containing action icons, strongest, minimal scope */
.runsheet-child-grid td.item-actions-td-cell,
.runsheet-child-grid td.item-actions-td-cell td,
.runsheet-child-grid td.item-actions-td-cell .item-actions {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    background-clip: padding-box !important;
}

/* Make runsheet child-grid cells use #f2f2f2 as fallback/override */
.runsheet-child-grid .dxgvTable_TitlePlantSoftwarev3,
.runsheet-child-grid .dxgvTable_TitlePlantSoftwarev3 td.dxgv,
.runsheet-child-grid td.dxgv {
    background-color: #f2f2f2;
    background-image: none !important;
}

/* Make inner template table / action icons match the runsheet cell background */
.runsheet-child-grid td.dxgv table,
.runsheet-child-grid td.dxgv table td,
.runsheet-child-grid .item-actions,
.runsheet-child-grid .item-actions-td,
.runsheet-child-grid .item-action {
    background-color: #f2f2f2 !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    /*background-image: none !important;*/
}

/* Make inner template table / action icons transparent so row hover shows through */
.runsheet-child-grid td.dxgv table,
.runsheet-child-grid td.dxgv table td,
.runsheet-child-grid .item-actions,
.runsheet-child-grid .item-actions-td,
.runsheet-child-grid .item-action,
.runsheet-child-grid .item-action * {
    background-color: transparent !important;
    /*background-image: none !important;*/
}

/* Defensive: ensure when a row is hovered the inner elements don't keep their own background */
.runsheet-child-grid tr:hover td.dxgv table,
.runsheet-child-grid tr:hover .item-actions,
.runsheet-child-grid tr:hover .item-action {
    background-color: transparent !important;
    /*background-image: none !important;*/
}

.runsheet-child-grid tr.dxgvDataRow_TitlePlantSoftwarev3 td:nth-child(10),
.runsheet-child-grid tr.dxgvDataRowAlt_TitlePlantSoftwarev3 td:nth-child(10) {
    color: #ED1C24 !important;
}

/* Ensure any spans / divs inside also stay red */
.runsheet-child-grid tr.dxgvDataRow_TitlePlantSoftwarev3 td:nth-child(10) span,
.runsheet-child-grid tr.dxgvDataRow_TitlePlantSoftwarev3 td:nth-child(10) div,
.runsheet-child-grid tr.dxgvDataRowAlt_TitlePlantSoftwarev3 td:nth-child(10) span,
.runsheet-child-grid tr.dxgvDataRowAlt_TitlePlantSoftwarev3 td:nth-child(10) div {
    color: #ED1C24 !important;
}



/*NEW header CHANGERS
/* Subtle <4px curl / rounded bubble corners for top banner */
.curled-header {
    position: relative;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    overflow: visible; /* allow subtle pseudo-element shading */
    background-clip: padding-box; /* keep background inside radius */
    /* very subtle outer drop shadow + faint inner shadow for depth */
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), inset 0 -2px 4px rgba(0,0,0,0.02);
}

/* keep the header content aligned to the curved container */
.curled-header > header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* faint bottom fade to suggest a curvature */
.curled-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 6px;
    pointer-events: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0));
    opacity: 0.95;
}

/* very subtle glossy highlight at the top edge */
.curled-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    pointer-events: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
}



/* Add to the end of site-runsheet.css
   Subtle but more pronounced rolled bottom corners on the purple top bar */
#Top.curled-header {
    position: relative;
    z-index: 1000; /* keep above page background */
    background: #6f2162 !important; /* match your purple if different */
    /* only round the bottom corners */
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    overflow: visible;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.04), 0 1px 0 rgba(0,0,0,0.04);
}

    /* make sure header content stays above the white overlay */
    #Top.curled-header > header {
        position: relative;
        z-index: 2;
    }

    /* white curved overlay that visually "rolls" the purple into the white content below */
    #Top.curled-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -8px; /* pulls overlay slightly below the bar edge */
        height: 16px; /* overlap height; tweak to taste */
        background: #ffffff; /* set to page/content background if not pure white */
        border-bottom-left-radius: 12px; /* double the visual radius for a smooth roll */
        border-bottom-right-radius: 12px;
        pointer-events: none;
        z-index: 1; /* sits under header content but above page background */
        box-shadow: 0 3px 6px rgba(0,0,0,0.06); /* subtle separation */
    }

/* tweak for very small screens if needed */
@media (max-width: 480px) {
    #Top.curled-header {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

        #Top.curled-header::after {
            bottom: -6px;
            height: 12px;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }
}

.button-top-flex {
    display: flex;
    justify-content: space-between;
    width: 100%;
}