/* ============================
   Signaalkleuren eindindicatie
   ============================ */

#Grid .e-rowcell.SignalYellow {
    background-color: #fff7aa !important;
}

#Grid .e-rowcell.SignalOrange {
    background-color: #ffd8b2 !important;
}

#Grid .e-rowcell.SignalRed {
    background-color: #ff7b7b !important;
}

/* ============================
   Hoverblok zichtbaar & solide
   ============================ */

#Grid .hover-details {
    display: none;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff !important;
    color: #222 !important;
    border: 1px solid #ccc;
    padding: 8px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 9999;
    min-width: 240px;
    border-radius: 4px;
    white-space: normal;
}

/* Hover tonen */
#Grid .e-row:hover .hover-details {
    display: block;
}

/* ============================
   Layout bescherming
   ============================ */

/* Verberg extra kolom header */
#Grid .e-headercell:last-child {
    display: none !important;
}

/* Zorg dat grid geen hoogte/width verschuift */
#Grid .hover-column-cell {
    width: 1px;
    height: 1px;
    overflow: visible;
}

/* Zorg dat signaleringskleur boven hover-highlight blijft */
#Grid td.SignalYellow,
#Grid td.SignalOrange,
#Grid td.SignalRed {
    position: relative;
    z-index: 2;
}

/* Syncfusion hoverkleur onderdrukken */
#Grid .e-row.e-hover .e-rowcell.SignalYellow,
#Grid .e-row.e-hover .e-rowcell.SignalOrange,
#Grid .e-row.e-hover .e-rowcell.SignalRed {
    background-color: inherit !important;
}

/* ============================
   Mobile fallback
   ============================ */

@media (max-width: 479px) {
    #Grid .hover-details {
        position: static !important;
        transform: none !important;
        display: block !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin-top: 4px !important;
    }
}

/* ==========================================
   Hovervlak zichtbaar & niet transparant
   ========================================== */

#Grid .e-content td.e-active {
    background-color: rgba(0, 0, 0, 0.06) !important;
}

    /* signaalkleuren winnen op hover */
    #Grid .e-content td.e-active.SignalYellow {
        background-color: #fff7aa !important;
    }

    #Grid .e-content td.e-active.SignalOrange {
        background-color: #ffd8b2 !important;
    }

    #Grid .e-content td.e-active.SignalRed {
        background-color: #ff7b7b !important;
    }