/********************************************************************************************************* 
     Author: Shawn N. Moore		
    Created: 8/1/2019
Description: SRDT (Santa Rosa Dynamic Tables) 
             Provides implementation for a more interactive table which provides some totaling, cell formatting
             and cell touched marking. 

Changes: 

SRDT3
20220427 SNM - Renamed and updated for Bootstrap 5 migration
**********************************************************************************************************/
/* override common library for striping - slightly different colors */
/* use a hint of app-color to match color scheme */
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: var(--app-color-tint-grey-99);
}

/* match table header with striping style */
.table .thead-light th {
    color: var(--app-color-20); /* bootstrap original: #495057 */
    background-color: var(--app-color-tint-grey-90); /* bootstrap original: #e9ecef */
    border-color: var(--app-color-tint-grey-80); /* bootstrap original: #dee2e6 */
}

.sr-totals-row {
    border-top-style: double;
    border-color: black;

}

.sr-sub-totals-row {
    border-top-style: solid;
    border-color: black;
}

.srdt-input {
    background-color: initial;
}

.srdt-input:not([readonly]) {
    font-weight: 500;
}

/* change the mouse pointer on read only input boxes */
.srdt-input[readonly] {
    border:none;
    cursor: default;
}


/* format the totals (read only) input a bit differently */
.srdt-sub-totals-input {
    cursor: default;
    border-top: groove;
    border-left: none;
    border-right: none;
    border-bottom: none;
    background-color: inherit;
}

/* format the totals (read only) input a bit differently */
.srdt-totals-input {
    cursor: default;
    border-top: solid;
    border-left: none;
    border-right: none;
    border-bottom: none;
    background-color: inherit;
}


/* style when the input cell in the table is being edited*/
.srdt-input-focus {
    padding-left: 1px;
}



/* make inputs with negative amounts show up in red (numbers beginning with the - character) */
input[value^="-"].negative-as-red {
    color: #d10000; /* darker red to meet at least a contrast ratio of 5:1 */
}


/* table column widths */

/* Don't define classes for these.  Because you want precision by a single percent
    Instead just embed the style attribute into the th element. 
    i.e.
    <th style="width:10%" class="text-center">Delete</th>
*/

.height-select-grid {
    /* A row height suitable for rows that contain selects.  This prevents the resize redraw effect that can be distracting. */
    line-height:2.4em;
    height:2.4em;
}

/* change cursor type*/
.clickable {
    cursor: pointer;
}


/* tighly padded button for grid */
.btn-pad-smaller {
    padding: 2px 5px 1px 5px;
}

/* inner yellow highlight for a cell, when it it has just been edited - i.e. when the user tabs/mouses off the field */
.cell-updated {
    box-shadow: inset 0px 0px 10px rgba(255,255,0,1) !important;
}


/* set all inputs within td cells to width of 100% - trying it here globally, hopefully without unintended consequences*/
td input {
    width:100%;
}

/* used to color the recently "modified" indicator */
.modified-recent-color {
    color: #29a070;
}

/* Sticky Table Classes */

/* make the th elements sticky with a top position of 50px (to account for the nav) 
   note: Chrome currently (12/30/2019) only supports sticky th, not thead elements
*/
thead.sticky-table-header tr:nth-child(1) th {
    /* make the th element sticky */
    position: sticky;
    top: 50px; /* adjust this based on any nav or top of page headers */
    /*z-index: 10;*/ /* not needed, but suggested by some online people */
}

/* style the table with separate borders, with no spacing*/
.sticky-table-border {
    /* Render so each cell has its own border, this enables the th elements to have their own border, wich is necessary for a sticky table, 
       so your borders aren't unrendered area, resulting in "see through" artifacting when you scroll */
    border-collapse: separate; /* Don't collapse */
    /* no cheesy 1990's white border areas between cells */
    border-spacing: 0;
}


/* Sort Icon classes (triangles) for table sorting using pure CSS - this makes it easier than injecting font awesome font tags with an <i> element */
.headerSortDown:after,
.headerSortUp:after {
    content: ' ';
    position: relative;
    left: 10px;
    border: 7px solid transparent;
}

.headerSortDown:after {
    top: 15px;
    border-top-color: var(--app-color-50);
}

.headerSortUp:after {
    bottom: 15px;
    border-bottom-color: var(--app-color-50);
}

.headerSortDown,
.headerSortUp {
    padding-right: 10px;
}