/* ---------------------------------------------------------------------------
 * Unread row styling for the staff lists: Contact Nurse, Billing Questions,
 * Appointments.
 *
 * Loaded after assets/vendor/datatables-bootstrap/dataTables.bootstrap.css,
 * which previously styled .important as a solid #77386C fill with white text.
 * That never worked, because the controllers wrap every cell's contents in
 * <a style="color:#000"> -- an inline style, which beats any colour declared in
 * a stylesheet. The result was black text on dark purple.
 *
 * So the background stays light enough for dark text to read, and "unread" is
 * carried by a purple left accent and weight instead of a block of colour.
 * Keeps the brand purple without shouting.
 * ------------------------------------------------------------------------- */

/* Beats the bare `.important` selector (0,1,1 vs 0,1,0), so any text not
   wrapped in an anchor is readable rather than white-on-white. */
tr.important {
    color: #3a2436;
}

tr.important > td {
    background-color: #f4eff3;   /* ~8% #77386C over white */
    font-weight: 600;
}

/* Inset shadow rather than a border: no 4px layout shift against read rows. */
tr.important > td:first-child {
    box-shadow: inset 4px 0 0 0 #77386c;
}

/* Matches Bootstrap's own .table-hover specificity, plus the class. */
.table-hover > tbody > tr.important:hover > td {
    background-color: #ece3eb;
}

/* The tables carry an inline style="color:purple", which cascades to cells that
   have no anchor. Anything inside an unread row should read as text, not link. */
tr.important > td,
tr.important > td a {
    text-decoration: none;
}