/* ==========================================================================
   5851 house grid look (dts - 10-17-26 - built w the help of AI)

   Web version of the WinForms grid look from V2:
     FocusedRow.BackColor  = Transparent, BackColor2 = Gainsboro, ForwardDiagonal gradient
     FocusedRow.BorderColor = Black, SelectedRow font = Bold
     no group panel, no row indicator
   Because the gradient starts from the row's own color, a red/yellow/etc. row
   KEEPS its color when selected and just fades to gray - same as WinForms.

   Colors are the SAME named colors as Globals.cs / ModelGlobals.cs
   (CSS and .NET share the X11 color names, so "LightCoral" is identical in both).

   Use: <DxGrid CssClass="@GridLook.Css" ...>  and color rows with GridLook.ColorRows(...)
   Add GridLook.Dense for the tight one-line WinForms rows.
   Change the look here once and every grid follows.
   ========================================================================== */

.grid5851 {
    --g5851-focus-end: gainsboro;     /* WinForms BackColor2 */
    --g5851-focus-border: #000;       /* WinForms BorderColor */
    --g5851-text: #000;
}

/* --- row colors: Globals.cs names ---------------------------------------- */
.grid5851 tr.row-red        { --row-bg: lightcoral; }      /* RED_COLOR */
.grid5851 tr.row-otherred   { --row-bg: indianred; }       /* OTHER_RED_COLOR */
.grid5851 tr.row-yellow     { --row-bg: yellow; }          /* YELLOW_COLOR, MESSAGE_SINGLE_INTERRUPT_COLOR */
.grid5851 tr.row-tomato     { --row-bg: tomato; }          /* MESSAGE_CONTINUAL_INTERRUPT_COLOR */
.grid5851 tr.row-green      { --row-bg: yellowgreen; }     /* GREEN_COLOR */
.grid5851 tr.row-lightgreen { --row-bg: lightgreen; }      /* LIGHT_GREEN */
.grid5851 tr.row-blue       { --row-bg: lightsteelblue; }  /* LIGHT_BLUE */

.grid5851 tr[class*="row-"] > td {
    background-color: var(--row-bg) !important;
    color: var(--g5851-text) !important;
}

/* --- focused row: diagonal fade from the row's own color to Gainsboro, black border, bold --- */
.grid5851 tr.dxbl-grid-focused-row > td {
    background-color: var(--row-bg, #fff) !important;
    background-image: linear-gradient(135deg, var(--row-bg, #fff) 0%, var(--g5851-focus-end) 100%) !important;
    color: var(--g5851-text) !important;
    font-weight: 700;
    border-top: 1px solid var(--g5851-focus-border) !important;
    border-bottom: 1px solid var(--g5851-focus-border) !important;
}
.grid5851 tr.dxbl-grid-focused-row > td:first-child { border-left: 1px solid var(--g5851-focus-border) !important; }
.grid5851 tr.dxbl-grid-focused-row > td:last-child  { border-right: 1px solid var(--g5851-focus-border) !important; }

/* --- dense: one-line rows, smaller type, cut off with "..." (like the WinForms queue) --- */
.grid5851.dense { font-size: .8rem; }
.grid5851.dense td {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-top: 2px !important; padding-bottom: 2px !important;
}