/* TABLE SCROLLER (assumes main is flex-column and table-container is the scroll row) */
.table-container {
    flex: 1 1 auto; /* row 2 fills remaining height */
    min-height: 0; /* critical for overflow inside flex */
    min-width: 0;
    overflow: auto;
    padding: 0; /* let main own horizontal padding */
}

/* TABLE */
table {
/*    border-collapse: collapse;
*/    width: max-content; /* enables horizontal scroll when many columns */
    min-width: 100%; /* but at least fill container */
}

/* STICKY HEADER */
thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #444; /* required so rows don't show through */
    color: #fff;
    border-left: 1px solid #222;
    border-right: 1px solid #222;
}

/* CELLS */
th, td {
    max-width: 200px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    padding: 8px;
}

    th:first-child, td:first-child {
        border-left: none;
    }

    /* If you truly want the last column to consume remaining space,
   keep this, but note: with width:max-content the table will size to content.
   Remove if it causes weird sizing. */
    th:last-child, td:last-child {
        width: 100%;
    }

/* ROW STYLING */
tbody tr:nth-child(even) {
    background-color: #efefef;
}

tbody tr:hover {
    border:2px solid #ccc;
    cursor: pointer;
}

/* SORT UI */
th .sort-indicator {
    opacity: .8;
    font-size: 12px;
    margin-left: 6px;
}

th.asc .sort-indicator::after {
    content: "▲";
}

th.desc .sort-indicator::after {
    content: "▼";
}

th[data-col-index] {
    user-select: none;
    cursor: pointer;
}

/* GLOBAL SEARCH INPUT */
#dashboard_globalSearch {
    width: 100%;
    max-width: 360px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* RESPONSIVE */
@media (max-width:900px) {
    table thead th, table td {
        min-width: 80px;
    }
}

@media (max-width:640px) {
    table thead th, table td {
        padding: 6px 8px;
        height: 36px;
        line-height: 36px;
        font-size: 13px;
    }

    .cell-content {
        height: 36px;
        line-height: 36px;
    }
}

/* EDITABLE CELL */
.cell-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
    padding: 6px 8px;
    font: inherit;
}

    .cell-input:focus {
        outline: 1px solid #cbd5e1;
        background: rgba(255,255,255,0.02);
    }

/* TOP INPUT */
.top-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
}


/* base status colors */
#dashboard tbody tr[data-status="1"] {
    background-color: #FFF9C4;
}

#dashboard tbody tr[data-status="2"] {
    background-color: #E8F5E9;
}

#dashboard tbody tr[data-status="3"] {
    background-color: #E3F2FD;
}

#dashboard tbody tr[data-status="4"] {
    background-color: #FFEBEE;
}

/* hover always wins */
#dashboard tbody tr:hover {
    background-color: lightgoldenrodyellow;
}