/*--- DOCS ---
- to enable custom table extension, apply class 'dataTable' on table
- legend: - className | applied on | class usage
- extra classes are:
    - gov-table__row--density-thick | table | uses vert padding to make rows less dense (more emnty space, less entities displayed)
    - gov-table__row--density-tight | table | uses vert padding to make rows more dense (less emnty space, more entities displayed)
    - gov-table__row--sticky-header | table | pins the table head row (thead tr th) to the top of table viewport, so that it stays visible during y-scroll
    - gov-table__row--hide | tr | used by hideRows() to hide entire row (single entity within table)
    - gov-table__row--highlight | tr | used by highlightRows() to highlight entire row (single entity within table) (color not gov-standard, applies to cells of row)

    - gov-table__cell--avatar | td | apply class on cell to style inner span icon like avatar (inside mid-aligned colored circle), used in name column to diferentiate items, people etc.
    - gov-table__cell--extra-narrow | td | extension of original --narrow class to make even thinner columns (contain single checkbox, icon, short link, button...)
    - gov-table__cell--hide | th, td | used by hideColumn() to hide all cells within column from layout
    - gov-table__cell--nowrap | td | avoid wrapping cell content, for whenever you want to keep the cell content in 1 line (multiple words, use of icons, marked text...)
    - gov-table__cell--sticky | td | used by columnActionSticky() to pin cells (in same column) to table viewport to ensure their visibility on x-scroll
    - gov-table__cell--textBlock | td | align cell content to top left, used for cells filled with text content (usually some description, address or really long names)

    - gov-table--cell__span--bold | td > span | bold text, for emphasizing content
    - gov-table--cell__span--currency-offset | td > span | when displaying monetary amounts, apply this whenever currency is not a symbol but 3-char shorthand (czk, usd) to ensure same align of numbers and currency spans
    - gov-table--cell__span--negative | td > span | apply color --gov-color-error (red) to spans
    - gov-table--cell__span--positive | td > span | apply color --gov-color-success (green) to spans
    - gov-table--cell__span--secondary | td > span | smaller grey text in same cell, for secodary info that might repeat (example: currency symbol, alignment to some group)
    - gov-table--cell__span--tertiary | td > span | even smalle grey text in same cell, on next row (IN the same CELL, NOT <tr>), same use
    - gov-table--cell__span--zoom | td > span | scaleup span icon inside cell

    - gov-custom-popup | div (js) | div for custom popup (primary colors, below evt.triggering button, whatever content)
    - gov-custom-popup_container | div containing button | used to contain button for custom popup (button.after(popup)), so that popup has right positioning in regards to button and page
--- ---- ---*/

table th, table td, .gov-table th, .gov-table td {
    padding: 0.25em 0;
}

#pageContent form.fit3TableLayout {
    max-height: 24vh;
}

#pageContent form.fit3TableLayout table.typeA th {
    min-width: 16.5em;
}

#pageContent form.fit2TableLayout {
    max-height: 35vh;
}

#pageContent form.fit1TableLayout {
    max-height: 80vh;
}

#pageContent form table .wide {
    min-width: 22em;
}

input.tableHeaderInput[type="text"] {
    padding: 0.25em 0.5em;
    font-size: 0.9em;
}

input.tableHeaderInput[type="text"]:focus, .tablefilterActive input.tableHeaderInput[type="text"] {
    padding-left: calc(2em + 3px);
}

.gov-table__cell-separator {
    border-bottom: 1px solid var(--gov-color-grey-inactive);
}

table.typeA {
    border-collapse: unset;
}

table.typeA td {
    padding-right: 1rem;
    padding-left: 1rem;
    min-width: 140px;
}

table.typeA th {
    background: var(--gov-color-blue-inactive-3);
    color: var(--gov-color-blue);
    padding-left: 1rem;
}

table.typeA tr td:last-child, table.typeA tr th:last-child  {
    /*width: 100%;*/
}

table.sortTable thead tr .tablesorter-headerAsc, table.sortTable thead tr .tablesorter-headerDesc {
    color: var(--gov-color-blue-light);
}

table.typeA td span.gov-icon,
table.typeA td span.gov-complex-icon {
    font-size: 1em;
    /*vertical-align: middle;*/
}

table.typeA td.gov-table__cell--avatar span.gov-icon,
table.typeA td.gov-table__cell--avatar span.gov-complex-icon {
    padding: 4px;
    border: 1px solid var(--gov-color-grey-mid);
    border-radius: calc(2 * 4px + 1em);
    display: inline-flex;
    background-color: var(--gov-color-blue-inactive-3);
    margin-right: 0.25em;
}

table.typeA td span.gov-table--cell__span--secondary {
    font-size: 0.8em;
    color: var(--gov-color-grey-light);
}

table.typeA td span.gov-table--cell__span--tertiary {
    font-size: 0.6em;
    color: var(--gov-color-grey-light);
    /*display: block;*/
}

table.typeA td span.gov-table--cell__span--currency-offset {
    margin-right: 1rem;/*might be smthn like 2ch instead*/
}
table.typeA td span.gov-table--cell__span--bold {
    font-weight: bold;
}
table.typeA td span.gov-table--cell__span--zoom {
    display: inline-block;
    transform: scale(1.25);
}

table.typeA td span.gov-table--cell__span--positive, table.typeA td span.gov-table--cell__span--negative {vertical-align: middle;}
table.typeA td span.gov-table--cell__span--positive {color: var(--gov-color-success);}
table.typeA td span.gov-table--cell__span--negative {color: var(--gov-color-error);}

table.typeA.gov-table__row--density-thick td {
    padding-top: 1em;
    padding-bottom: 1em;
}
table.typeA.gov-table__row--density-tight td {
    padding-top: 0.05em;
    padding-bottom: 0.05em;
}

table.typeA td.gov-table__cell--textBlock {
    vertical-align: top;
    text-align: left;
}

table.typeA.gov-table__row--sticky-header {
    border-top: none;
}

table.typeA.gov-table__row--sticky-header thead tr th {
    position: sticky;
    top: 0;
    border-top: 1px solid var(--gov-color-blue);
    border-bottom: 1px solid var(--gov-color-blue);
    background-color: var(--gov-color-blue-inactive-3);
    z-index: 2;
    /*box-shadow: inset -1px -1px 1px 0px var(--gov-color-grey-inactive);*/
    opacity: 0.95;
}

table.typeA th.gov-table__cell--sticky, table.typeA td.gov-table__cell--sticky {
    background-color: var(--gov-color-blue-inactive-3);
    position: sticky;
    left: 0;/*debug - depends on table container padding, px due to different font*/
    right: 0;
    padding: 0 0.25em;
    z-index: 1;
    box-shadow: inset -1px -1px 1px 0px var(--gov-color-grey-inactive);
    opacity: 0.95;
    width: fit-content!important;
    text-align: center;
    border-left: 1px solid var(--gov-color-blue);
    border-right: 1px solid var(--gov-color-blue);
}

table.typeA.gov-table__row--sticky-header th.gov-table__cell--sticky {
    z-index: 3;
}

table.typeA input[type="checkbox"].gov-form-control__checkbox {
    z-index: 7;
    width: 20px;
    height: 20px;
}

table.typeA.gov-table tbody td.gov-table__cell--extra-narrow {
    min-width: 50px;
}

table.typeA tr.gov-table__row--highlight td {
    background: #d9ff66;/*TEMP - out of gov-color standard*/
}

tr.gov-table__row--hide, th.gov-table__cell--hide, td.gov-table__cell--hide {
    display: none!important;
}

table.typeA:not(.labelValueForm) tbody tr:hover td {
    box-shadow: inset 0 0 500px 500px rgba(20,125,255,0.1);/*this way enables trasparency and still using highlights, animation etc, alt by bg-img = no animation*/
    transition: box-shadow 0.15s ease-in-out;
}

table.typeA tbody tr td {
    transition: box-shadow 0.15s ease-in-out;
}

table.typeA tr:not(:last-child) td {
    border-bottom: 1px solid var(--gov-color-grey-inactive);
}

table.typeA tr:first-child td {
    border-top: 1px solid var(--gov-color-grey-inactive);
}

table.typeA td.gov-table__cell--nowrap {
    white-space: nowrap;
}

.gov-custom-popup_container {
    position: relative;
    width: fit-content;
}

.gov-custom-popup {
    position: absolute;
    top: 1.5em;
    background: var(--gov-color-white);
    display: block;
    z-index: 4;
    padding: 1.5em 1em 0.5em;
    border-radius: 3px;
    box-shadow: 0 2px 6px 0px var(--gov-color-grey-light);
    opacity: 0.95;
}

.gov-custom-popup div.gov-form-control {
    display: inline;
}

.gov-custom-popup button {
    width: 20px;
    height: 20px;
    margin-bottom: 4px;
}

table.typeA .gov-form-control__checkbox {
    cursor: pointer;
}

/*table pager*/
.pagerCtl select {
    padding: 0em 0.2em;
    outline: none;
    background: transparent;
    color: var(--gov-color-blue);
    border: 1px solid var(--gov-color-blue);
}

.pagerCtl select:hover {
    background: var(--gov-color-blue-hover);
    color: var(--gov-color-blue-dark);
}

.gov-button.gov-button--x-small {
    padding: 0.15rem 0.45rem
}

.gov-button.gov-button--custom-active {
    border-color: var(--gov-color-blue-focus);
    color: var(--gov-color-blue-focus);
    background-color: var(--gov-color-white);
}

table.typeC tr th {
    padding-left: 0.5em;
}

table.typeB tr td:first-child {
    padding-left: 0.5em;
}

@media (max-width: 31.99em) {/*disable for mobile tables*/
    .gov-custom-popup button, button#clientTableHead {
        display: none;
    }
    .gov-custom-popup .gov-custom-popup_row {
        margin-bottom: 4px;
    }

}