@import "./styles.css";

.admin-console-content[content="salary2"] {
    flex-direction: column;
    justify-content: flex-start;
}

.admin-salary2-frame {
    grid-area: frame;
    justify-self: center;
    display: grid;
    grid-template-areas:
        "header"
        "center"
        "footer";
    grid-template-rows: 0fr 1fr 0fr;
    grid-template-columns: 1fr;
    color: var(--grey50);
    font-weight: 500;
    background-color: var(--grey50);
    background-color: var(--dm3);
    width: 100%;
    height: 100%;
    box-shadow: var(--boxShadow);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    /*background-color: #233659;
    color: #565b73;*/
}

.admin-salary2-frame-header {
    grid-area: header;
    display: flex;
}

.admin-salary2-frame-footer {
    grid-area: footer;
    display: flex;
}

.admin-salary2-frame-center {
    grid-area: center;
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.admin-salary2-table {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--grey50);
    overflow: auto;
    height: 100%;
    width: 100%;
    user-select: text;
    padding: 0.8rem;
    row-gap: 0.8rem;
}

.admin-salary2-table-userRow {
    display: grid;
    grid-template-areas:
        'header'
        'bookings'
        'pad';
    grid-template-columns: 1fr;
    grid-template-rows: 0fr 1fr 0fr;
    border: 1px solid var(--indigo500);
    width: 100%;
}

.admin-salary2-table-userRow-pad {
    grid-area: pad;
    display: grid;
    grid-template-columns: 6rem 6rem 6rem 6rem 8rem 4rem 24rem repeat(4, 4rem) 8rem 6rem auto 6rem;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    height: 100%;
    width: 100%;
    border-top: 1px solid var(--indigo500);
}

.admin-salary2-table-userRow-pad-el {}

.admin-salary2-table-userRow[show=false] {
    display: none;
}

.admin-salary2-table-userRow[book-count="0"] {
    /* display: none; */
}

.admin-salary2-table-userRow-header {
    grid-area: header;
    display: grid;
    grid-template-areas:
        'info';
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.6rem;
    width: 100%;
    border-bottom: 1px solid var(--indigo500);
}

.admin-salary2-table-userRow-info {
    grid-area: info;
    display: grid;
    grid-template-columns: 12rem 2rem 4rem 4rem;
    grid-template-rows: 1fr;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
}

.admin-salary2-table-userRow-info-infoEl {
    display: flex;
}

.admin-salary2-table-userRow-salaryNum-input {
    display: flex;
    font-family: 'Quicksand';
    color: var(--grey50);
    font-size: 0.65rem;
    font-weight: 400;
    padding: 0.2rem;
    text-align: center;
    /* border: 1px solid var(--grey200); */
    border: 1px solid transparent;
    border-radius: 4px;
    /* background-color: var(--grey50); */
    width: 100%;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-salary2-table-userRow-salaryNum-input:focus {
    border: 1px solid var(--indigo500);
    /* background-color: var(--lightBlue); */
}

.admin-salary2-table-userRow-tier-input {
    display: flex;
    font-family: 'Quicksand';
    color: var(--grey50);
    font-size: 0.65rem;
    font-weight: 400;
    padding: 0.2rem;
    text-align: center;
    /* border: 1px solid var(--grey200); */
    border: 1px solid transparent;
    border-radius: 4px;
    /* background-color: var(--grey50); */
    width: 100%;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-salary2-table-userRow-tier-input:focus {
    border: 1px solid var(--indigo500);
    /* background-color: var(--lightBlue); */
}

.admin-salary2-table-userRow-total {
    grid-area: total;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    color: var(--green500);
}

.admin-salary2-table-userRow-bookings {
    grid-area: bookings;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    width: 100%;
}

.admin-salary2-table-userRow-bookings-header {
    display: grid;
    grid-template-columns: 6rem 6rem 6rem 3rem 4rem 4rem 6rem 4rem 6rem 4rem 4rem 8rem 6rem 16rem auto 6rem;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    height: 100%;
    width: 100%;
    border-bottom: 1px solid var(--indigo500);
}

.admin-salary2-table-userRow-bookings-header-el {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
}

.admin-salary2-table-userRow-bookings-info {
    display: grid;
    grid-template-columns: 10rem 14rem 6rem 6rem 6rem 8rem 1fr;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    height: 100%;
    width: 100%;
    border-bottom: 1px solid var(--indigo500);
}

.admin-salary2-table-userRow-bookings-info-el {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
}

.admin-salary2-table-userRow-bookings-info-el[ref="total"] {
    font-weight: 500;
    color: var(--green500);
}

.admin-salary2-table-bookingDiv {
    display: grid;
    grid-template-columns: 6rem 6rem 6rem 3rem 4rem 4rem 6rem 4rem 6rem 4rem 4rem 8rem 6rem 16rem auto 6rem;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    height: 100%;
    width: 100%;
    background-color: transparent;
}

.admin-salary2-table-bookingDiv-infoEl {
    /* white-space: nowrap; */
}

.admin-salary2-table-bookingDiv:not(:last-child) {
    border-bottom: 1px solid var(--indigo500);
}

.admin-salary2-table-bookingDiv-infoEl[value="confirmed"] {
    color: var(--green500);
}

.admin-salary2-table-bookingDiv-infoEl[value="cancelled-paid"] {
    color: var(--green500);
}

.admin-salary2-table-bookingDiv-infoEl[value="cancelled-unpaid"] {
    color: var(--red500);
}

.admin-salary2-table-bookingDiv-infoEl[value="cancelled"] {
    color: var(--red500);
}

.admin-salary2-table-bookingDiv-recalcBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    color: var(--grey50);
    background-color: var(--indigo500);
    border: 1px solid var(--indigo500);
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear;
    margin-left: auto;
}

.admin-salary2-table-bookingDiv-recalcBtn:hover {
    cursor: pointer;
    color: var(--grey50);
    background-color: transparent;
    border: 1px solid var(--indigo500);
}

.admin-salary2-table-bookingDiv-recalcDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 4px;
    width: fit-content;
    column-gap: 0.4rem;
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear;
}

.admin-salary2-table-bookingDiv-recalcDiv[orig-match=true] {
    color: var(--grey50);
}

.admin-salary2-table-bookingDiv-recalcDiv[orig-match=true]::after {
    content: 'check';
    font-family: 'material symbols rounded';
    color: var(--green500);
    font-size: 0.85rem;
}

.admin-salary2-table-bookingDiv-recalcDiv[orig-match=false] {
    color: var(--grey50);
    background-color: transparent;
    border: 1px solid var(--grey50);
}

.admin-salary2-table-bookingDiv-recalcDiv[orig-match=false]:hover {
    cursor: pointer;
    color: var(--deepPurple400);
    background-color: var(--grey50);
    border: 1px solid var(--grey50);
}

.admin-salary2-table-bookingDiv-recalcDiv[recalc-status="pending"] {
    /* color: var(--deepPurple400); */
}

.admin-salary2-table-bookingDiv-recalcDiv[recalc-status="confirmed"] {
    color: var(--green500);
    border: 1px sold transparent;
    cursor: default;
}

.admin-salary2-table-bookingDiv-recalcDiv[recalc-status="confirmed"]:hover {
    color: var(--green500);
    border: 1px sold transparent;
    cursor: default;
}

.admin-salary2-table-bookingDiv-recalcDiv[recalc-status="confirmed"]::after {
    content: 'cloud_done';
    font-family: 'material symbols rounded';
    color: var(--green500);
    font-size: 0.85rem;
}

.admin-salary2-table-bookingDiv-recalcDiv[recalc-status="error"]::after {
    content: 'error';
    font-family: 'material symbols rounded';
    color: var(--red500);
    font-size: 0.85rem;
}

.admin-salary2-table-irregDiv {
    display: grid;
    grid-template-columns: 6rem 6rem 6rem 3rem 4rem 4rem 6rem 4rem 6rem 4rem 4rem 8rem 6rem 16rem auto 6rem;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    height: 100%;
    width: 100%;
    background-color: transparent;
}

.admin-salary2-table-irregDiv-infoEl[ref="book-type"] {
    color: var(--indigo500);
}

.admin-salary2-table-irregDiv-infoEl {
    /* white-space: nowrap; */
}

.admin-salary2-table-irregDiv:not(:last-child) {
    border-bottom: 1px solid var(--indigo500);
}

.admin-salary2-table-irregDiv-infoEl[value="approved"] {
    color: var(--green500);
}

.admin-salary2-table-irregDiv-infoEl[value="declined"] {
    color: var(--red500);
}

.admin-salary2-table-travelDiv {
    display: grid;
    grid-template-columns: 6rem 6rem 6rem 3rem 4rem 4rem 6rem 4rem 6rem 4rem 4rem 8rem 6rem 16rem auto 6rem;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    height: 100%;
    width: 100%;
    background-color: transparent;
}

.admin-salary2-table-travelDiv-infoEl[ref="book-type"] {
    color: var(--indigo500);
}

.admin-salary2-table-travelDiv-infoEl[ref="book-status"] {
    color: var(--green500);
}

.admin-salary2-table-travelDiv-infoEl {
    /* white-space: nowrap; */
}

.admin-salary2-table-travelDiv:not(:last-child) {
    border-bottom: 1px solid var(--indigo500);
}

.admin-salary2-table-waitDiv {
    display: grid;
    grid-template-columns: 6rem 6rem 6rem 3rem 4rem 4rem 6rem 4rem 6rem 4rem 4rem 8rem 6rem 16rem auto 6rem;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    height: 100%;
    width: 100%;
    background-color: transparent;
}

.admin-salary2-table-waitDiv-infoEl[ref="book-type"] {
    color: var(--indigo500);
}

.admin-salary2-table-waitDiv-infoEl[ref="book-status"] {
    color: var(--green500);
}

.admin-salary2-table-waitDiv-infoEl {
    /* white-space: nowrap; */
}

.admin-salary2-table-waitDiv:not(:last-child) {
    border-bottom: 1px solid var(--indigo500);
}