@import '/assets/fonts/gothampro/style.css';
@import '/assets/fonts/roboto/style.css';

/* region BASE*/
:root {
    --app-bg-gradient: radial-gradient(at bottom right, #0007 0%, #0000 60%, #0000);
    --app-bg-color: #b2d6ff;

    /*header*/
    --header-bg: #2a8dff;
    --header-height: 65px;

    /*boards*/
    --board-list-color: #fff0;
    --board-card-color: #fff;

    /*cards*/
    --card-shadow: 0px 3px 3px #777B, 0px 0px 3px #777B;

    --card-decline-color: #ec9191;
    --card-missing-color: #d0d0d0;
    --card-success-color: #9be8b9;

    --card-decline-outline: 2px dashed #ec9191;
    --card-missing-outline: 2px dashed #d0d0d0;

    --card-min-width: 360px;

    /*  colors */
    --color-blue: #3d89f3;
    --color-blue-dark: #3070c9;
    --color-blue-darker: #24579e;
    --color-blue-darkest: #062e67;
    --color-teal: #1c9a9a;
    --color-lime: #7cc42f;
    --color-grey-light: #f4f4f4;

    /* z-index */
    --z-index-header: 200;
    --z-index-board-head: 100;
}

.flipped {
    transform: scaleX(-1);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24
}

h1 {
    text-align: center;
}

.app {
    position: relative;
    display: flex;
    flex-direction: column;
    background-image: var(--app-bg-gradient);
    background-color: var(--app-bg-color);
    background-attachment: fixed;
    height: 100vh;
    overflow: auto;
}

header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'employee title menu';
    align-items: center;
    padding: 0 15px;
    background: var(--header-bg);
    color: white;
    position: sticky;
    top: 0;
    left: 10px;
    z-index: var(--z-index-header);
    min-height: min-content;
    border-radius: 100px;
    margin: 0 10px;
}

.header_title {
    grid-area: title;
}

.header_employee {
    grid-area: employee;
    display: flex;
    align-items: center;
    gap: 15px;
}

.header_employee [data-action="logout"] {
    max-width: 32px;
    white-space: nowrap;
    overflow: hidden;
    transition: 300ms;
}

.header_employee:hover [data-action="logout"] {
    max-width: 100px;
}

.header_employee [data-action="logout"] .bi::before {
    transform: rotate(-90deg);
}

.header_employee-pic {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    overflow: hidden;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-bounding-box' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5M.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5'/%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 26px;
    background-repeat: no-repeat;
    color: transparent;
}

.header_employee-pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.header_menu {
    grid-area: menu;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
}

@media (max-width: 767px) {
    header {
        grid-template-columns: auto 1fr 1fr auto;
        grid-template-areas: '. title title .'' . employee menu .';
        border-radius: 0;
        margin: 0;
        padding: 10px;
        left: 0;
    }

    .header_employee-name {
        display: none;
    }
}

footer {
    padding: 15px;
    background: var(--header-bg);
}

footer a {
    color: white;
    text-decoration: none;
}

footer ul {
    color: white;
    padding: 0;
    margin: 0;
}

main {
    flex: 1 1 auto;
}

.toast-container {
    position: fixed;
}

button > * {
    pointer-events: none;
}

/* endregion BASE*/

/* region FORM*/
.loading {
    pointer-events: none;
}

.loading .modal_grid {
    opacity: 0.5;
}

.loading::before {
    content: "";
    position: absolute;
    background-color: #fffd;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_b2T7%7Banimation:spinner_xe7Q .8s linear infinite%7D.spinner_YRVV%7Banimation-delay:-.65s%7D.spinner_c9oY%7Banimation-delay:-.5s%7D@keyframes spinner_xe7Q%7B93.75%25,100%25%7Br:3px%7D46.875%25%7Br:.2px%7D%7D%3C/style%3E%3Ccircle class='spinner_b2T7' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_b2T7 spinner_YRVV' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_b2T7 spinner_c9oY' cx='20' cy='12' r='3'/%3E%3C/svg%3E");
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100px;
    z-index: 10;
    inset: 0;
}

.form_group {
    display: grid;
    margin-bottom: 10px;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
}

.form_group:has(:user-invalid) {
    background-color: #F004;
}

.form_group[disabled] {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
}

.form_group[hidden] {
    display: none;
}

.form_group[disabled] .choices__item {
    padding: 0 10px;
}

.form_group[disabled] .choices__input {
    display: none;
}

.form_group[disabled] div,
.form_group[disabled] input:not[type="checkbox"] {
    background-color: transparent;

}

.form_group[disabled] .choices__button {
    display: none;
}

.single-select,
.multi-select {
    flex: 1 1 calc(100% - 42px);
}

.single-select {
    display: block;
}

.multi-select {
    display: none;
}

.multi .multi-toggle,
.multi .single-select {
    display: none;
}

.multi .multi-select {
    display: block;
}

.form-label {
    font-weight: 600;
}

.form_selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.form_group.input-group {
    display: flex;
    align-items: center;
}

.form_group .choices__inner {
    padding: .375rem .75rem !important;
    min-height: 38px !important;
    border-radius: var(--bs-border-radius);
}

.form_group .form-control .choices__inner {
    border: none;
    background-color: #fff;
}

.form_group .is-open .choices__inner {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.form_group .choices__input {
    padding: 0;
    margin: 0;
}

.form_group .choices__list--single {
    padding: 0;
}

.form_selected-list .choices__item {
    padding: 2px 5px 2px 0;
    border-radius: 8px;
    border: 1px solid lightgray;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
}

.choices::after {
    content: "";
    height: 0;
    width: 0;
    border-style: solid;
    border-color: #333 transparent transparent;
    border-width: 5px;
    position: absolute;
    right: 11.5px;
    top: 19px;
    margin-top: -2.5px;
    pointer-events: none;
}

.form_group .choices__list--dropdown .choices__placeholder {
    display: none;
}


.form_selected-inner {
    background-color: #fff;
}

.form_selected-list .choices__item .choices__button {
    border: none;
    background: none;
    font-size: 0;
    padding: 0;
    width: 20px;
    text-indent: 0;
    margin: 0;
}

.form_selected-list .choices__item .choices__button::before {
    font-family: 'bootstrap-icons', serif;
    display: block;
    content: "\F62A";
    color: grey;
    font-size: 20px;
}

.form_group .choices {
    margin-bottom: 0;
}

.choices select.choices__input {
    display: block !important;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 0;
    bottom: 0;
}

.form_order {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form_order-btn {
    width: 100%;
}

.form_order-list {
    min-height: 100px;
    font-size: 14px;
    overflow-y: auto;
}

.form_order-list:empty {
    opacity: .4;
}

.form_order-list:empty::before {
    content: "...";
    padding: 15px;
}

.form_order-block {
    border-radius: var(--bs-border-radius);
    background-color: #0001;
    padding: 10px;
    margin-bottom: 15px;
}

.form_order-name {
    position: sticky;
    top: 0;
    font-weight: bold;
    padding: 5px 10px;
    background-color: #e3e3e3;
    box-shadow: 0 3px 3px 0 #e3e3e3;
    margin-bottom: 5px;
}

.form_order-item {
    padding: 0 0 5px 20px;
}


@media (max-width: 1400px) {
    .form_group {
        padding: 0 5px 3px;
        margin-bottom: 3px;
    }

    .form-control {
        padding: .25rem .50rem;
        font-size: .8rem;
    }

    .form-label {
        font-size: 14px;
        margin-bottom: .3rem;
        line-height: 1.2;
    }

    .form_group .choices__inner {
        padding: .25rem .50rem !important;
        font-size: .8rem;
        min-height: 30px !important;
    }

    .form_group.input-group {
        align-items: center;
        padding-top: 3px;
    }

    .form_group .btn {
        font-size: 14px;
        line-height: 16px;
    }

    .modal-header {
        padding: 5px 15px
    }

    .input-group-text {
        padding: .25rem .50rem;
        font-size: 1.2rem;
    }
}

/* endregion FORM*/

/* region CAR MODAL */
.modal-header {
    display: grid;
    grid-template-columns: min-content 1fr min-content;
}

.modal-title {
    text-align: center;
}

.modal-xxl {
    width: 100%;
    max-width: 1440px
}

.modal_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.archive .modal_col:last-child,
.modal_col {
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
}

.modal_col:last-child {
    background-color: #fff;
    padding: 0;
}

.modal_col-2 {
    grid-column: span 2;
}

.modal_col-time {
    grid-area: time;
    align-self: end;
    justify-self: end;
}

.modal_col-time div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.modal_col-time .material-symbols-rounded {
    font-size: 32px;
}

.modal_col-time .time-slot_time {
    font-size: 18px;
}

.modal_col-time .plan {
    color: #bba03e
}

.modal_col-action {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-self: end;
    justify-self: end;
    margin-top: auto;
}

.modal_col-end {
    margin-top: auto;
}

@media (max-width: 1400px) {
    .modal-dialog {
        margin: 0 auto;
    }

    .modal_col-md-2 {
        grid-column: span 2;
    }

    .modal_col-md-2 .form_group {
        display: grid;
        grid-template-columns: 1fr 2fr;
        align-items: center;
        gap: 15px;
    }

    .modal_col-md-2 .form_group .form-label {
        justify-self: end;
    }
}

/* endregion CAR MODAL */

/* region ARCHIVE MODAL*/


.reason,
.order {
    font-size: 14px;
    border-radius: 4px;
    background-color: #0001;
    padding: 10px;
    margin-bottom: 5px;
}

[data-sort="asc"] i:not(#asc) {
    display: none;
}

[data-sort="desc"] i:not(#desc) {
    display: none;
}

/*endregion Archive modal*/

/* region TOAST*/
.toast-header [data-title] .bi {
    padding-right: 5px;
}

/* endregion TOAST*/