/* Utils */
@import url("./utils/ress.min.css");
/* Reset + Normalize */
@import url("./utils/bootstrap-grid.min.css");
/* Bootstrap Grid */
/* Utils - Custom */
@import url("./utils/font.css");
@import url("./utils/color.css");
@import url("./utils/space.css");

/* Custom Utilies =========================================================== */
.relative {
    position: relative;
}

.cancel-date {
    color: rgb(255, 61, 61);
}

.absolute {
    position: absolute;
}

:root {
    --rounded-xs: 5px;
    --rounded-sm: 10px;
}

/* Components */
button[type="submit"] {
    position: relative;
    overflow: hidden;
}

.positions {
    gap: var(--space-s);
}

.positions:hover {
    cursor: pointer;
}

button[type="submit"].loading>.loader {
    position: absolute;
    width: var(--space-s);
    height: var(--space-s);
    inset: 0;
    margin: auto;
}

button[type="submit"].loading::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: gray;
    opacity: 0.5;
}

/* Components - Loader */
.loader {
    width: 48px;
    height: 48px;
    border: 3px solid #fff;
    border-bottom-color: var(--color-primary);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Custom CSS =============================================================== */
body {
    font-family: "Prompt", sans-serif;
    font-size: var(--step-0);
    background-color: var(--color-bg);
}

.nav {
    --padding-inline: var(--space-2xl);
    position: sticky;
    top: 0;
    width: 100%;
    display: flex;
    z-index: 10;
}

.nav__brand,
.nav__content {
    padding-left: var(--padding-inline);
    padding-right: var(--padding-inline);
}

.nav__brand {
    background-color: var(--color-primary);
}

.nav__brand>img {
    padding: var(--space-xl) 0;
}

.nav__content {
    width: 100%;
    background-color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__content .user__name {
    color: #333333;
}

.nav__content .user__email {
    color: #b3b3b3;
}

.nav__content .btn-wrapper.logout>button {
    color: #616161;
}

.page-content {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Homepage */
.user-home {
    border-radius: var(--rounded-sm);
}

.user-home__form,
.user-home__intro {
    height: 800px;
}

/* Homepage - Form */
.user-home__form form {
    background-color: #eef2f7;
    border-radius: var(--rounded-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.user-home__form form .input-wrapper {
    background-color: var(--white);
    border-radius: var(--rounded-sm);
}

.user-home__form form .input-wrapper>* {
    font-family: "Prompt", sans-serif;
    display: block;
    width: 100%;
    color: #c1cbd7;
}

.user-home__form form button[type="submit"],
.btn {
    display: inline-block;
    background-color: #17a1fa;
    border-radius: 20px;
}

a.btn {
    text-decoration: none;
}

.user-home__form .wrapper {
    width: 100%;
    max-width: 470px;
}

.user-home__form .wrapper>p:last-child {
    color: #c1cbd7;
}

/* Homepage - Intro */
.user-home__intro {
    filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.25));
    background-image: url("../assets/home-intro.webp");
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: var(--rounded-sm);
}

.user-home__intro .ktech-logo {
    position: absolute;
    right: 38px;
    top: -20px;
}

.user-home__intro .content {
    max-width: 315px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 10%;
}

.user-home__intro .content__icons {
    display: flex;
    gap: var(--space-s);
}

.user-home__intro .content__icons>a {
    text-decoration: none;
}

/* Select Date */
.select__title,
.select__content {
    border-radius: var(--rounded-sm);
}

.select__title {
    padding-bottom: var(--space-l);
}

.select__content {
    position: relative;
    margin-top: calc((var(--space-m) / 2) * -1);
}

.date-item {
    padding-bottom: var(--space-xl);
}

.date-item:not(:last-child) {
    /* margin-bottom: var(--space-l); */
    border-bottom: 2px solid #eef2f7;
}

.date-item__text>p:last-child {
    color: #b3b3b3;
}

.date-item__list {
    /* display: grid; */
    /* grid-template-columns: repeat(3, 1fr); */
    /* gap: var(--space-m); */
}

.time-checkbox {
    border: 2px solid #eef2f7;
    border-radius: var(--rounded-xs);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
    transition: all 0.25s ease-in;
    cursor: pointer;
}

.time-checkbox input[type="checkbox"],
.time-checkbox input[type="radio"] {
    --circle-size: var(--space-s);
    box-sizing: border-box;
    width: var(--circle-size);
    height: var(--circle-size);
    padding: 0;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    appearance: none;
    transition: background-color 0.25s ease-in;
}

.time-checkbox input[type="checkbox"]:checked,
.time-checkbox input[type="radio"]:checked {
    background-color: var(--color-primary);
}

.time-checkbox span {
    color: var(--color-primary);
    font-size: var(--step-0);
}

.time-checkbox:has(input:checked) {
    background-color: rgba(252, 238, 31, 0.33);
    border-color: #fcee1f;
    box-shadow: 0px 4px 8px 0px rgba(252, 238, 31, 0.33);
}

/* Select Date - Calendar */
#calendar {
    margin-left: auto;
    margin-right: auto;
}

.arrow-material {
    background: url("https://api.iconify.design/ic/round-arrow-left.svg?color=%2326346f") no-repeat center center / contain;
    color: #26346f;
    width: var(--space-m);
    height: var(--space-m);
}

.arrow-material[data-calendar-arrow="next"] {
    transform: scaleX(-1);
}

.vanilla-calendar-header {
    justify-content: center;
}

.vanilla-calendar-header__content {
    flex-grow: unset;
}

.vanilla-calendar-header__content button {
    font-size: var(--step--1);
    background-color: var(--color-primary);
    line-height: 1;
    padding: var(--space-3xs) var(--space-2xs);
}

[data-calendar-theme="light"] .vanilla-calendar-header__content,
[data-calendar-theme="light"] .vanilla-calendar-month,
[data-calendar-theme="light"] .vanilla-calendar-year {
    color: var(--white);
}

[data-calendar-theme="light"] .vanilla-calendar-week__day {
    color: #b3b3b3;
}

[data-calendar-theme="light"] .vanilla-calendar-week__day_weekend {
    color: #f43f5e;
}

/* .vanilla-calendar-day__btn_selected, */
.vanilla-calendar-week__day_weekend,
.vanilla-calendar-day__btn_weekend {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.3;
}

.vanilla-calendar-day__btn_selected {
    opacity: 1;
}

[data-calendar-theme="light"] .vanilla-calendar-week__day_weekend:nth-child(6),
.vanilla-calendar-day:nth-child(7n - 1) .vanilla-calendar-day__btn_weekend,
.vanilla-calendar-day:nth-child(7n - 1) .vanilla-calendar-day__btn_holiday {
    color: #17a1fa;
}

[data-calendar-theme="light"] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_selected,
[data-calendar-theme="light"] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_selected,
[data-calendar-theme="light"] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_selected:hover,
[data-calendar-theme="light"] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_selected:hover,
[data-calendar-theme="light"] .vanilla-calendar-day__btn_selected,
[data-calendar-theme="light"] .vanilla-calendar-day__btn_selected:hover {
    background-color: rgb(252 238 31 / var(--tw-bg-opacity));
    color: var(--black);
}

[data-calendar-theme="light"] .vanilla-calendar-day__btn:hover {
    --tw-bg-opacity: 0.25;
    background-color: rgb(252 238 31 / var(--tw-bg-opacity));
}

/* Success Select Date */
.success-message {
    max-width: 530px;
    margin-left: auto;
    margin-right: auto;
}

/* Admin - Applicants */
.applicants__board {
    /* max-width: 1000px; */
    display: grid;
    gap: var(--space-xs);
    grid-template-columns: repeat(3, 1fr);
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(192, 203, 215, 0.5);
    border-radius: var(--rounded-sm);
    /* padding-top: var(--space-xs);
    padding-bottom: var(--space-xs); */
    padding: var(--space-xs);
    overflow: auto;
    height: 55vh;
}

.applicants__board-item>h3 {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
}

.applicants__list {
    /* padding-right: var(--space-xs);
    padding-left: var(--space-xs); */
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    gap: var(--space-xs);
}

.applicants__list>.item:empty {
    background-color: rgba(193, 203, 215, 0.5);
}

.applicants__list .item {
    background-color: var(--white);
    padding: var(--space-xs);
    border-radius: var(--rounded-sm);
    display: flex;
    gap: var(--space-2xs);
    justify-content: space-between;
    min-height: 75px;
}

.applicants__list .item>.wrapper {
    display: flex;
    gap: var(--space-2xs);
}

.applicants__list .item__content>p:last-child {
    color: #c1cbd7;
}

/* .applicants__list .item__cat { */
.applicants-cat {
    --circle-size: var(--step-1);
    display: block;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    position: relative;
    top: 3px;
    flex: 0 0 auto;
}

/* .applicants__list .item__cat[data-cat='gd'] { */
.applicants-cat[data-cat="gd"] {
    background-color: #ff6b00;
}

/* .applicants__list .item__cat[data-cat='dev'] { */
.applicants-cat[data-cat="dev"] {
    background-color: #17a1fa;
}

.applicants__list .item__cta,
.applicants__list .item__cta>a {
    display: flex;
}

.applicants__list .item__cta {
    justify-content: flex-end;
    gap: var(--space-2xs);
}

.applicants__list .item__cta .email {
    color: #ff9696;
}

.applicants__list .item__cta .email.loading {
    color: #fedede;
}

.applicants__list .item__cta .zoom {
    font-size: var(--step--1);
    position: relative;
    /* top: 5px; */
}

.applicants__list .item__cta .done {
    font-size: var(--step-1);
    color: #6bc363;
}

.applicants__list[data-type="done"] .item__content p:last-child {
    display: none;
}

.applicants__list[data-type="done"] .item>.wrapper {
    align-items: center;
}

.applicants__list[data-type="done"] .item__cat {
    top: unset;
}

.applicants__list[data-type="done"] .item__cat,
.applicants__list[data-type="done"] .item__content,
.applicants__list[data-type="done"] .item__cta {
    align-items: center;
}

/* Applicants - Footer */
.applicants__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.applicants__footer-cat ul,
.applicants__footer-cat ul li,
.applicants__footer-cta {
    /* display: flex; */
    /* gap: var(--space-xs); */
}

.applicants__footer-cat ul {
    flex-direction: column;
    background-color: white;
    /* border-radius: var(--space-s); */
    overflow-y: scroll;
}

.applicants__footer-cat ul::-webkit-scrollbar {
    display: none;
}

/* .applicants__footer-cat ul { */
/* 	list-style-type: none; */
/* 	gap: var(--space-m); */
/* } */

.applicants__footer-cat ul li {
    gap: var(--space-2xs);
}

.applicants__footer-cat .applicants-cat {
    top: unset;
}

.applicants__footer-cta .btn-select-date {
    background-color: #3a4fa7;
    display: flex;
    align-items: center;
}

.applicants__footer-cta .btn-check-update {
    background-color: #6bc363;
}

.applicants__footer-cta .btn-check-update.loading {
    background-color: #bad6b7;
}

/* Exception */
.page-content[data-type="select-date"] {
    min-height: 100vh;
    /* padding-top: var(--space-2xl); */
    padding-bottom: var(--space-2xl);
    display: flex;
    flex-direction: column;
}

/* Responsive */
@media (max-width: 992px) {
    .page-content[data-type="home"] {
        height: unset;
        padding-top: var(--space-m);
        padding-bottom: var(--space-m);
    }

    .applicants {
        padding-left: 0;
        padding-right: 0;
    }

    .applicants__board {
        display: flex;
    }

    .applicants__board-item {
        flex: 0 0 100%;
    }

    .applicants__list .item {
        align-items: center;
    }
}

@media (max-width: 576px) {
    .nav {
        --padding-inline: var(--space-s);
        flex-direction: column;
    }

    .nav__brand>img {
        text-align: center;
    }

    .nav__brand>img,
    .nav__content {
        padding-top: var(--space-m);
        padding-bottom: var(--space-m);
    }

    .page-content {
        padding-left: var(--space-s);
        padding-right: var(--space-s);
    }

    .date-item__list {
        grid-template-columns: 1fr;
    }

    .applicants__footer {
        gap: var(--space-s);
    }

    .applicants__footer-cat ul {
        justify-content: center;
    }
}

.congratulation-container {
    height: calc(100vh - 152px);
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

@media screen and (max-width: 768px) {
    .congratulation-container {
        width: 100%;
    }
}

.air-datepicker-nav--title {
    background-color: #26346f;
    color: white;
}

.air-datepicker-nav--title i {
    color: white !important;
}

.air-datepicker-cell.-selected-,
.-custom-selected- {
    background: #fcee1f !important;
    color: black !important;
    border-bottom: 5px solid red;
}

.time-input {
    gap: var(--space-xs);
}

select {
    padding: var(--space-s);
}

.update-dropdown {
    gap: 0.1em;
    background-color: white;
    overflow-y: scroll;
}

.update-dropdown::-webkit-scrollbar {
    display: none;
}

.dropdown-child {
    color: black;
    gap: 0.5em;
}

.dropdown-child:disabled {
    background-color: #d6d6d6;
}

.dropdown-child:hover {
    background-color: #d6d6d6;
    cursor: pointer;
}

.button-update {
    background-color: #6bc363;
    display: flex;
    align-items: center;
    border-radius: var(--space-m);
}

.button-update button:nth-child(2) {
    /* margin-left: 0.3em; */
    border-left: 1px solid white;
}

.instructions {
    margin-bottom: var(--space-xl);
}

.instruction__title {
    font-size: var(--step-1);
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
}

.instruction__title .number {
    background-color: var(--color-primary);
    color: white;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-radius: 100%;
}

.instruction::after {
    display: block;
    height: 100%;
    width: 0.5px;
    background-color: black;
}

/* archived page */
.archived-item {
    background: white;
    padding: 1.75rem;
    margin-top: 1.75rem;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.archived-item .unarchive {
    color: rgb(255, 73, 73);
}