@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&display=swap");

/* ---------- */
.intern-locked .bg-img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    inset: 0;
    filter: blur(6px);
}

.intern-locked .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

main:has(.intern-locked) + footer {
    display: none;
}

.intern {
    background-image: url("/assets/images/bg-stg.png");
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

@media (max-width: 768px) {
    .intern {
        padding-top: 0;
    }
}
/* start header */
.intern-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 4.5rem;
}

.intern-dashboard .intern-header {
    margin-bottom: 70px;
}
.intern-header__right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.profile-avatar {
    width: 3rem;
    height: 3rem;
    border: 1px solid #000b33;
    border-radius: 50%;
    overflow: hidden;
}
button.disconnect-btn {
    background-color: #000b33;
    color: white;
    padding: 0.75rem 1.125rem;
    border-radius: 50px;
    border: 1px solid #000b33;
    font-size: 14px;
}
.intern-header__mobile-menu-btn {
    display: none;
    border: none;
    width: 35px;
    height: 35px;
    background-color: #3064ff;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
@media (max-width: 768px) {
    .intern-header,
    .intern-dashboard .intern-header {
        padding-inline: 1rem;
        background-color: #2d2d2d;
        padding-block: 10px;
        position: fixed;
        width: 100%;
        z-index: 10;
        margin-bottom: 0;
    }
    .intern-logo {
        width: 124px;
    }
    .intern-header button.disconnect-btn {
        display: none;
    }
    .profile-avatar {
        display: none;
    }
    .intern-header__mobile-menu-btn {
        display: flex;
    }
    .intern-header__mobile-menu-btn.active .open {
        display: none;
    }
    .intern-header__mobile-menu-btn.active .close {
        display: block;
    }
    .intern-header__mobile-menu-btn .close {
        display: none;
    }
}
/* end header */
.intern-dashboard .welcome-section {
    margin-bottom: 65px;
}
.welcome-section {
    margin-bottom: 41px;
}
.welcome-section .welcome-text {
    text-align: center;
    font-size: 16px;
    margin-bottom: 0px;
    margin-inline: auto;
    max-width: 600px;
}

h1.welcome-title {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000b33;
    font-size: 50px;
    font-weight: 600;
    line-height: 100%;
    gap: 20px;
    position: relative;
    z-index: 1;
}

span.name-tag {
    color: #fff;
    display: inline-block;
    border-radius: 0 20px 20px 20px;
    background: linear-gradient(91deg, #000b33 -1.95%, #3064ff 130.88%);
    line-height: 1;
    padding-inline: 22px;
    padding-block: 3px;
    position: relative;
}
span.name-tag::after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 100%;
    height: 100%;
    border-radius: 0 20px 20px 20px;
    background: #2d2d2d;
    z-index: -1;
}
@media (max-width: 768px) {
    .intern .welcome-section {
        margin-bottom: 55px;
        padding-top: 70px;
        padding-inline: 10px;
    }
    h1.welcome-title {
        padding-inline: 1rem;
        font-size: 40px;
        flex-wrap: wrap;
        gap: 15px;
    }
}
/* intern-content */

.intern-content {
    border-radius: 57px 0 0 0;
    background: linear-gradient(119deg, #000b33 3.2%, #002199 96.67%);
    display: grid;
    grid-template-columns: 215px 1fr;
    padding-block: 18px;
    padding-right: 12px;
}
.intern-dashboard .intern-content {
    grid-template-columns: 226px 1fr;
    padding-block: 18px;
    padding-right: 0px;
}
.intern-content__right {
    background-color: white;
    border-radius: 26px;
    padding: 14px 17px;
    padding-bottom: 40px;
    min-height: 850px;
}
.intern-dashboard .intern-content__right {
    border-radius: 56px;
}

.intern-content__right .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    max-width: 572px;
    margin: 0 auto;
}

.intern-content__right .wrapper .title,
.intern-locked .wrapper .title {
    font-size: 2.5rem;
    font-family: "kanit-semibold";
    text-align: center;
    line-height: 1.4;
}

.intern-content__right .wrapper .description,
.intern-locked .wrapper .description {
    font-size: 1.5rem;
    text-align: center;
}

.week-progress {
    border-radius: 45px;
    background-image: url("/assets/images/bg-week-progress.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 24px;
    margin-bottom: 15px;
}
.week-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 52px;
}

.week-title {
    color: #fff;
    font-size: 50px;
    font-weight: 600;
    line-height: normal;
    line-height: 1;
}

p.week-description {
    flex-basis: 332px;
}

@media (max-width: 992px) {
    .intern-dashboard .intern-content,
    .intern-content {
        grid-template-columns: 190px 1fr;
        padding-right: 0;
    }
    .week-progress {
        padding: 15px;
    }
    .week-header {
        padding-left: 10px;
        gap: 15px;
        flex-wrap: wrap;
        margin-bottom: 0;
    }
    p.week-description {
        margin-bottom: 0;
    }
}
@media (max-width: 768px) {
    .intern-dashboard .intern-content,
    .intern-content {
        grid-template-columns: 1fr;
        border-radius: 0;
    }

    .week-title {
        font-size: 36px;
    }
}
/*  intern content grid  */

.intern-content-grid {
    display: grid;
    grid-template-columns: 1fr 330px;
    column-gap: 15px;
    row-gap: 24px;
    margin-bottom: 17px;
}

.context-sidebar {
    grid-area: 1 / 2 / 3 / 3;
    border: 1px solid #2d2d2d;
    border-radius: 45px;
    position: relative;
}
.context-content {
    border-radius: 45px;
    height: 100%;
    background-color: white;
    padding: 36px 27px;
    position: relative;
    z-index: 1;
}
.context-sidebar::after {
    content: "";
    border-radius: 45px;
    background: #2d2d2d;
    position: absolute;
    top: 0;
    right: -5px;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.context-title {
    color: #3064ff;
    font-size: 32px;
    font-weight: 400;
    line-height: 100%;
    margin-bottom: 16px;
}
.context-content p {
    color: #6b6b6b;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 16px;
}

.reminder-title {
    border-radius: 20px;
    background: #e7e7e7;
    width: 215px;
    color: #000;
    font-size: 20px;
    font-weight: 400;
    line-height: 100%;
    padding: 10px 14px;
    margin-bottom: 15px;
}

.day-card {
    border-radius: 20px;
    background: linear-gradient(91deg, #464646 -42.5%, #2d2d2d 99.28%);
    padding: 12px 40px;
    color: white;
    position: relative;
    padding-bottom: 26px;
    height: fit-content;
}
.day-info h3 {
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 4px;
}
.day-info h3 span {
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
}

.day-info p {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0px;
}
.day-icon {
    position: absolute;
    top: 0;
    right: 34px;
}

.intern-section-title {
    color: var(--Blue-600, #2563eb);
    font-size: 24px;
    font-weight: 400;
    line-height: 100%;
}

@media (max-width: 992px) {
    .intern-content-grid {
        grid-template-columns: 1fr;
    }
    .day-icon {
        right: 6px;
        width: 100px;
    }
    .context-sidebar {
        grid-area: auto;
    }
}
@media (max-width: 768px) {
    .day-card {
        padding: 12px 15px;
    }
}
/*  tasks */
section.overview-section {
    padding-bottom: 0.5rem;
}
.overview-section .intern-section-title {
    margin-bottom: 25px;
}
.tasks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 13px;
}
.task-card {
    padding: 20px;
    border-radius: 12px;
    background: #eff4ff;
    height: 135px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.task-label {
    color: #656565;
    line-height: 100%;
}
.task-number {
    color: #2563eb;
    font-size: 42px;

    font-weight: 700;
    line-height: 100%;
}
.presentations-section {
    border-radius: 45px;
    border: 1px solid #2d2d2d;
    margin-inline: 10px;

    position: relative;
}
.presentations-section::after {
    content: "";
    border-radius: 45px;
    background: #2d2d2d;
    position: absolute;
    top: 0;
    right: -5px;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.presentations-content {
    background: #fff;
    border-radius: 45px;
    padding: 30px 34px;
    position: relative;
    z-index: 1;
}
.presentations-content .intern-section-title {
    margin-bottom: 36px;
}
.presentations-grid {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.presentation-card {
    border-radius: 9px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    min-height: 140px;
    max-width: 222px;
}
.presentation-card.yellow {
    background-color: #fdc228;
    color: #000;
}
.presentation-card.green {
    background-color: #86ec27;
    color: #000;
}
.presentation-card.pink {
    background-color: #d88ea9;
    color: #fff;
}
.presentation-card.orange {
    background-color: #ff5428;
    color: #fff;
}
.presentation-avatar {
    display: flex;
    align-items: end;
}
.presentation-avatar img {
    height: 140px;
    width: 100%;
    object-fit: cover;
}
.presentation-card-text {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-family: Poppins;
}
.presentation-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 131%;
    transform: translateX(-11px);
}
.presentation-meta {
    font-size: 11.501px;

    font-weight: 400;
    line-height: 100%;
}

.presentation-card:not(.pink):not(.orange) .presentation-meta {
    color: #656565;
}

.presentation-footer {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.presentation-footer__text {
    border-radius: 18px;
    background-color: #e7e7e7;
    padding: 10px 14px;
    color: #000;
    font-size: 17.302px;
    font-weight: 400;
    line-height: 100%;
}
@media (max-width: 768px) {
    .task-number {
        font-size: 35px;
        text-align: center;
    }
    .context-content {
        padding: 20px 15px;
    }
    .presentations-section {
        margin-inline: 0;
    }
    .presentations-content {
        padding: 20px 15px;
    }
    .presentation-card {
        max-width: 100%;
    }
}

/* nav bar */
nav.intern__sidebar {
    padding-top: 10px;
}

.user-avatar {
    width: 102px;
    height: 102px;
    border-radius: 50%;
    overflow: hidden;
    margin-inline: auto;
    margin-bottom: 100px;
}

.user-avatar img,
.profile-avatar img {
    height: 100%;
    object-fit: cover;
}

.intern__menu {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    list-style: none;
    margin-bottom: 0;
    padding-left: 10px;
}
.intern__menu li {
    position: relative;
    padding-left: 24px;
    padding-right: 15px;
    padding-block: 7px;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    transform: translateX(1px);
}
.intern__menu li.active::after {
    position: absolute;
    content: "";
    bottom: 0;
    right: -1px;
    width: 35px;
    height: 32px;
    background-image: url(/assets/images/icons/bg-intern-menu-2.svg);
    transform: translateY(98%);
    z-index: 0;
}
.intern__menu li.active::before {
    position: absolute;
    content: "";
    top: 0;
    right: -1px;
    width: 35px;
    height: 32px;
    background-image: url(/assets/images/icons/bg-intern-menu-1.svg);
    transform: translateY(-98%);
    z-index: 0;
}
.intern__menu a {
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    gap: 9px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.intern__menu li.active {
    background-color: white;
}
.intern__menu li.active a,
.intern__menu li:hover a {
    color: #3064ff;
}
.intern__nav-icon {
    width: 30px;
    height: 30px;
}
.intern__menu li.active img,
.intern__menu li:hover img {
    filter: invert(76%) sepia(100%) saturate(2520%) hue-rotate(216deg)
        brightness(95%) contrast(113%);
}

@media (max-width: 992px) {
    nav.intern__sidebar .intern__menu {
        padding-left: 10px;
        gap: 15px;
    }
    .intern__menu a {
        font-size: 16px;
        font-weight: 500;
    }
}

@media (max-width: 768px) {
    nav.intern__sidebar {
        display: block;
        position: fixed;
        top: 55px;
        width: 100%;
        border-top: 2px solid #3064ff;
        z-index: 10;
        background: #2d2d2d;
        height: calc(100vh - 55px);
        overflow-y: scroll;
        padding-bottom: 30px;
        padding-top: 20px;
        transform: translateX(-100%);
        transition: transform 0.8s ease;
    }
    nav.intern__sidebar.active {
        transform: translateX(0%);
    }
    .user-avatar {
        width: 85px;
        height: 85px;
        margin-bottom: 20px;
    }
    .intern__menu {
        max-width: 300px;
        margin-inline: auto;
        padding-left: 0;
    }
    .intern__menu li {
        border-radius: 10px;
        padding-left: 18px;
    }
    .intern__menu li.active::before {
        display: none;
    }
    .intern__menu li.active::after {
        display: none;
    }

    .intern__nav-icon {
        width: 24px;
        height: 24px;
    }
}

/* mon-profile styles */
.mon-profile-section {
    padding-inline: 10px;
    font-family: "Inter";
}
.mon-profile__tabs {
    display: flex;
    border-bottom: 1px solid #f4f5f7;
    gap: 55px;
    margin-bottom: 50px;
}

.mon-profile__tab {
    padding-inline: 11px;
    color: #718ebf;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 16px;
    padding-block: 19px 6px;
}

.mon-profile__tab:hover {
    color: #3064ff;
}

.mon-profile__tab.active {
    color: #3064ff;
    border-bottom-color: #3064ff;
}

.mon-profile__tab-content {
    display: none;
    /* padding: 32px; */
}

.mon-profile__tab-content.active {
    display: block;
}

/* Performance Report Styles */
.mon-profile__rapport {
    background-color: #06153b;
    border-radius: 20px;
    margin-inline: 13px 32px;
    padding-inline: 66px;
    color: #ffff;
    font-family: "Kanit";
    padding-bottom: 54px;
}
.mon-profile__performance-header {
    padding-top: 46px;
    margin-bottom: 55px;
}

.mon-profile__performance-title {
    font-size: 30.604px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 14px;
}

.mon-profile__performance-subtitle {
    font-size: 20px;
}

.mon-profile__performance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    max-width: 870px;
    margin-inline: auto;
}
.mon-profile__performance-grid:nth-of-type(2) {
    margin-bottom: 32px;
}

.mon-profile__performance-grid:nth-of-type(3) {
    grid-template-columns: 1fr 1fr;
}
.mon-profile__score-section {
    text-align: center;
}

.mon-profile__score-circle {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 24px;
}

.mon-profile__score-circle svg {
    transform: rotate(-90deg);
}

.mon-profile__score-circle .bg {
    fill: none;
    stroke: #545e74;
    stroke-width: 12;
}

.mon-profile__score-circle .mon-profile__progress {
    fill: none;
    stroke: #ffffff;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 534;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1s ease;
}

.mon-profile__score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: "Inter";
    font-size: 72.26px;
    font-weight: 500;
    line-height: normal;
}

.mon-profile__section-title {
    margin-bottom: 16px;
}
h2.mon-profile__section-title {
    font-size: 27px;
    font-weight: 600;
}
h3.mon-profile__section-title {
    font-size: 20px;
    font-weight: 500;
}
.mon-profile__soft-skills {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 20px;
    padding-right: 20%;
}

.mon-profile__skill-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 18px;
    flex-wrap: wrap;
}

.mon-profile__task-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mon-profile__task-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mon-profile__synthesis {
    font-family: "Inter";
    font-size: 17.002px;
    line-height: normal;
}

/* Profile Styles */
.mon-profile__edit-profile {
    display: grid;
    grid-template-columns: 135px 1fr;
    gap: 42px;
    align-items: start;
}
.mon-profile__profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    row-gap: 30px;
    align-items: end;
}

.mon-profile__profile-avatar {
    padding-top: 8px;
}

.mon-profile__edit-profile .avatar {
    position: relative;
    width: fit-content;
}

.mon-profile__edit-profile .avatar img {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    object-fit: cover;
}

.mon-profile__edit-profile .edit-icon {
    position: absolute;
    bottom: 14px;
    right: 5px;
    width: 30px;
    height: 30px;
    background-color: #1814f3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
}

.mon-profile__form-label {
    display: block;
    color: #232323;
}

.mon-profile__form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.3s ease;
    color: #718ebf;
    background-color: white;
}

.mon-profile__form-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Preferences Styles */
.mon-profile__preferences-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.mon-profile__setting-group {
    margin-bottom: 32px;
}

.mon-profile__setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #e9ecef;
}

.mon-profile__setting-item:last-child {
    border-bottom: none;
}

.mon-profile__toggle {
    position: relative;
    width: 48px;
    height: 24px;
    background: #ced4da;
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.mon-profile__toggle.active {
    background: #007bff;
}

.mon-profile__toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.mon-profile__toggle.active::after {
    transform: translateX(24px);
}

/* .password-section {
    margin-top: 32px;
} */
.mon-profile__form-actions {
    grid-column: 2 / 3;
    margin-left: auto;
    padding-top: 45px;
}
.mon-profile__btn-save {
    width: 180px;
    padding-block: 12px;
    text-align: center;
    border-radius: 15px;
    background: #1814f3;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    border: none;
}
@media (max-width: 992px) {
    .mon-profile__edit-profile {
        grid-template-columns: 1fr;
    }

    .mon-profile__rapport {
        margin-inline: 0;
        padding-inline: 20px;
    }
    .mon-profile__performance-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        max-width: 100%;
        margin-inline: auto;
    }
    .mon-profile__performance-header {
        padding-top: 30px;
    }

    .mon-profile__performance-title {
        font-size: 24px;
        margin-bottom: 8px;
    }
    .mon-profile__soft-skills {
        padding-right: 0;
    }
    .mon-profile__form-actions {
        grid-column: auto;
        padding-top: 0;
    }
}
@media (max-width: 768px) {
    .mon-profile-section {
        padding-inline: 0;
    }
    .mon-profile__tab {
        font-size: 12px;
    }
    .mon-profile__performance-grid,
    .mon-profile__performance-grid:nth-of-type(3) {
        grid-template-columns: 1fr;
    }

    .mon-profile__profile-grid {
        grid-template-columns: 1fr;
    }

    .mon-profile__preferences-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .mon-profile__tabs {
        gap: 10px;
        margin-bottom: 30px;
    }
    .mon-profile__setting-group {
        margin-bottom: 15px;
    }
    .mon-profile__form-actions .mon-profile__btn-save {
        width: 130px;
        padding-block: 8px;
    }
}