/* The table showing the first few and last rows of the dataframe */
/* -------------------------------------------------------------- */

.table-with-selectable-cells {
    --arrow-width: var(--base-size);
}

.table-with-selectable-cells {
    margin: var(--border-m);
    border: none;
}

.table-with-selectable-cells tbody {
    border: var(--border-s) solid var(--mediumg);
}

.table-with-selectable-cells thead th {
    vertical-align: top;
    border: var(--border-s) solid var(--mediumg);
}

/* The column containing the selected cell has green stripes. */
/* The rest of the table has gray stripes added by pure.css */

#report .table-cell[data-is-in-active-column] {
    background-color: var(--active-column-color);
}

tbody tr {
    --active-column-color: var(--lightgreen);
}

tbody tr:nth-child(2n -1) {
    --active-column-color: var(--mediumgreen);
}

thead {
    --active-column-color: var(--darkgreen);
}

.table-with-selectable-cells th[data-role="padding"]{
    background-color: white;
    border: none;
}

.table-with-selectable-cells th[data-role="columns-level-name"]{
    text-align: right;
    padding-right: calc(calc(2 * var(--space-s)) + var(--arrow-width));
    position: relative;
}

.table-with-selectable-cells th[data-role="columns-level-name"] > .arrow-icon {
    position: absolute;
    width: var(--arrow-width);
    height: 100%;
    top: 0;
    bottom: 0;
    left: 100%;
    right: calc(-1 * var(--arrow-width));
    transform: translateX(calc(-1 * var(--space-s)));
    display: flex;
    user-select: none;
}

.table-with-selectable-cells th[data-role="columns-level-value"]{}
.table-with-selectable-cells th[data-role="column-name"]{}


.table-with-selectable-cells th[data-role="index-level-name"],
.table-with-selectable-cells th[data-role="index-level-value"]{
    background-color: white;
    border: 1px solid var(--mediumg);
    text-align: right;
}

.table-with-selectable-cells th[data-role="dataframe-data"]{}

.table-cell[data-is-active] {
    --active-column-color: var(--lightyellow);
}

table:not(:focus-within):not(:has(:active)) .table-cell[data-is-active] {
    outline: var(--border-m) dotted black;
}

.table-cell[data-is-active]:focus {
    outline-width: var(--border-m);
    outline-style: solid;
    outline-color: Highlight;
    outline-color: -webkit-focus-ring-color;
}

#report .table-cell[data-is-active][data-just-copied]:focus {
    outline-width: var(--border-m);
    outline-style: dashed;
    outline-color: Highlight;
    outline-color: -webkit-focus-ring-color;
}


/* The gap separating the head and the tail of the table */

#report .ellided-table-part,
#report .ellided-table-part td {
    border: var(--border-m) dashed var(--mediumg);
    text-align: center;
    border-top: 0;
    border-bottom: 0;
    background: inherit;
}

#report .ellipsis-icon {
    display: flex;
    flex-direction: column;
    max-height: var(--space-xl);
}

#report table:has([data-role="index-level-value"]) .ellided-table-part td:first-child .ellipsis-icon * {
    align-self: flex-end;
}

.table-bar-wrapper {
    min-height: calc(var(--line-height) * 1em + 2 * var(--space-m));
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: var(--space-s);
}

/* Information below the table: dimensions and keyboard shortcuts */

.table-footer {
    display: flex;
    justify-content: flex-start;
    column-gap: var(--space-xxl);
    padding-top: var(--space-s);
}

.table-footer > * {
    flex-shrink: 1;
}

.keyboard-hints  {
    display: none;
    flex-basis: max(0px, min(50%, calc((50% - 25ch) * 99999)));
    min-width: 0px;
    height: 2em;
    margin-bottom: calc(-1 * var(--space-m));
    margin-right: var(--space-s);
    overflow: hidden;
    flex-shrink: 10000;
}

.keyboard-hints > div {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2em;
}

:has(.table-with-selectable-cells:focus-within) ~ .table-footer .keyboard-hints {
    display: block;
}

.keyboard-key {
    font-size: var(--text-xs);
    font-family: var(--fontStack-monospace);
    padding: 0 var(--space-m);
    line-height: 1.8;
    color: #444444;
    border: var(--border-s) solid #cccccc;
    border-bottom: var(--border-s) solid #bbbbbb;
    box-shadow: inset 0 calc(-1 * var(--border-s)) 0 #bbbbbb;
    border-radius: 0.2em;
    min-width: 1em;
    text-align: center;
    margin: var(--space-xs);
    display: inline-block;
    text-wrap: nowrap;
    flex-shrink: 0;
}
