/* make slide work without JS */
.nested-enter-active,
.nested-leave-active {
    transition: opacity 0.3s ease-in-out;
}

.nested-leave-active {
    transition-delay: 0.6s;
}

.nested-enter-from,
.nested-leave-to {
    opacity: 0;
}

.nested-enter-active .inner,
.nested-leave-active .inner {
    transition: transform 0.6s ease;
}

.nested-enter-active .inner {
    transition-delay: 0.3s;
}

.nested-enter-from .inner,
.nested-leave-to .inner {
    transform: translateX(100%);
}

.my-task-slider {
    background-color: var(--background);
    border-left: var(--border);
    width: var(--slider-width);
    max-width: var(--slider-max-width);
    position: absolute;
    right: 0;
    box-sizing: border-box;
    padding: min(5vw, 40px) min(4vw, 40px);
    box-shadow: 0 0 100px rgb(0 0 0 / 4%);
    height: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.my-task-slider.inner.short {
    width: calc(1100px - 5%);
    max-width: calc(95% - 5%);
}

.my-task-slider .my-tasks-body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.my-task-slider .slider-loader-wrapper {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

/*my tasks*/
.task-item {
    background-color: var(--white);
    border: var(--border);
    border-radius: var(--borderRadius);
    margin-bottom: 4px;
}

.task-header .loader-bar {
    bottom: 0px;
}

.task-header .loader-wrapper {
    height: 2px;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.task-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: min(4vw, 20px) min(5vw, 24px);
    cursor: pointer;
    align-items: start;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}

.task-header .icon.task {
    width: min(5vw, 38px);
    margin-left: -4px;
    padding: 0;
}

.task-header > div {
    flex: 1;
}

.task-header .icon.arrow {
    margin-top: 12px;
}

.task-header .icon.arrow.open {
    transform: rotate(180deg);
}

.task-proposal-subject{
    margin-bottom: 8px;
}

.task-header .task-name,
.task-header span {
    font-weight: 600;
    white-space: break-spaces;
}

.task-header > .icon-component {
    align-self: center;
}

.task-header p:not(.task-name) {
    font-size: 0.8em;
    margin-top: 2px;
}

.task-content {
    padding: 0 min(6vw, 32px) min(5vw, 24px) min(6vw, 32px);
    display: flex;
    flex-direction: column;
    gap: min(6vw, 32px);
}

.task-nav-buttons {
    display: flex;
    gap: 24px;
    justify-content: flex-end;
    margin-bottom: min(6vw, -16px);
}

.task-nav-buttons button {
    padding: 0;
    gap: 4px;
    border: none;
}

.sender-comment-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-sender-comment {
    color: var(--darkgrey);
    line-height: 20px;
    white-space: break-spaces;
}

.task-content .form-group {
    margin-bottom: 0;
}

/* These action buttons stack an icon medallion, a title and a description, so they need
   room the shared `button` rule in styles.css does not allow: its `max-height: 45px` sizes
   single-line controls and cascades in here per-property, squashing the medallion and
   painting the description outside the button, over the next one. Released only for this
   container; every other button keeps the 45px cap. */
.task-buttons-container button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: min(4vw, 16px);
    width: 100%;
    justify-content: flex-start;
    max-height: none;
}

.task-buttons-container button .icon {
    width: min(4vw, 18px);
}

.task-buttons-container button div {
    background-color: var(--background);
    border: var(--border);
    width: min(8vw, 48px);
    height: min(8vw, 48px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    margin-bottom: min(0vw, 8px);
}

.task-buttons-container button p:last-of-type {
    font-size: 0.9em;
    color: var(--darkgrey);
}

.task-buttons-container {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
}

.task-item textarea {
    background-color: var(--background);
}

.task-nav-buttons button:hover,
.task-page-content button:hover {
    border: none!important;
    background-color: transparent;
}

/** Task Page **/
.task-page-section .titles-bar {
    margin-top: 16px;
}

.task-page-section .titles-bar .buttons {
    display: none;
}

.task-page-container {
    display: flex;
    gap: max(2vw, 24px);
    margin-top: min(8vw, 32px);
    justify-content: end;
}

.task-page-container > div:first-child {
    width: max(50%, 380px);
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 9px;
}

.task-page-content {
    width: 50%;
}

.task-proposal-border {
    background-color: var(--white);
    min-height: 300px;
    border: var(--border);
    border-radius: var(--borderRadius);
    margin-top: 8px;
}

.task-proposal-border .proposal-container {
    margin-left: 0 !important;
}

/* Signature collection tasks: the extract under signature, called out above the proposal preview
   rather than left to be found among the proposal's attachments. Reuses the same surface tokens as
   .task-proposal-border so the two panels read as one column. */
.task-signature-document {
    background-color: var(--white);
    border: var(--border);
    border-radius: var(--borderRadius);
    margin-top: 8px;
    padding: 16px;
}

.task-signature-document-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.task-signature-document-name {
    color: var(--darkgrey);
    word-break: break-all;
}

.task-page-content button {
    padding: 0;
    border: none;
    background: none;
    gap: 4px;
    align-self: flex-end;
}

.task-page-content button:hover {
    text-decoration: underline;
}

.task-actions .task-page-content {
    display: none;
}

.task-actions .task-sender {
    font-weight: unset;
    font-size: unset;
    margin-bottom: 4px;
}

.task-actions .form-group,
.task-actions .task-sender-comment {
    margin-bottom: 0;
}

/*Substitute Titles*/
.task-item-container {
    margin-bottom: 32px;
}

.substitute-group {
    margin-bottom: 4px;
}

.task-item-title {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--white);
    border: var(--border);
    border-radius: var(--borderRadius);
    cursor: pointer;
    padding: min(4vw, 20px) min(5vw, 24px);
}

.substitute-group.expanded .task-item-title {
    border-radius: var(--borderRadius) var(--borderRadius) 0 0;
}

.task-count {
    color: var(--darkgrey);
    font-size: var(--text-s);
    white-space: nowrap;
}

.substitute-tasks-list .task-item {
    margin-bottom: 0;
    border-radius: 0;
    border-top: none;
}

.substitute-tasks-list .task-item:last-child {
    border-radius: 0 0 var(--borderRadius) var(--borderRadius);
}

.task-give-knowledge {
    background-color: var(--white);
    border-radius: var(--borderRadius);
    border: var(--border);
}

.task-give-knowledge>div:first-child {
    padding: 12px;
}

.task-give-knowledge .task-give-knowledge-people-picker {
    padding: 12px;
    border-top: var(--border);
}

/* .task-item-title .user {
    border: 2px solid var(--boardPrimary);
} */

.task-item-title h4 {
    flex-grow: 1;
}

.task-item-title .arrow {
    align-self: center;
    filter: none;
}

.my-task-slider .tabs-wrapper {
    position: relative;
}

.my-task-slider .tabs.overflowing {
    cursor: grab;
}

.my-task-slider .tabs.dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.my-task-slider .tabs-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.my-task-slider .tabs-fade-left {
    left: 0;
    background: linear-gradient(to right, var(--background), transparent);
}

.my-task-slider .tabs-fade-right {
    right: 0;
    background: linear-gradient(to left, var(--background), transparent);
}

.sent-tasks-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    margin-left: 2px;
}

.sent-tasks-filters > span, 
.sent-tasks-filters .custom-select__trigger {
    color: var(--darkgrey)!important;
    font-size: var(--text-s);
}

.sent-tasks-filter-select {
    width: auto;
    min-width: 140px;
}

.sent-task-receiver {
    display: flex;
    align-items: center;
    gap: min(2vw, 16px);
}

.sent-task-receiver img.user {
    width: 24px;
    height: 24px;
}

.sent-task-item .task-header {
    cursor: default;
}

.sent-task-progress-update-button {
    align-self: center;
    flex-shrink: 0;
}

.sent-task-progress-update-button .icon {
    width: 20px;
}

.sent-task-header-pending {
    padding: min(4vw, 12px) min(5vw, 24px) min(4vw, 12px) min(5vw, 27px);
    border-top: var(--border);
    display: flex;
    gap: 12px 24px;
    justify-content: space-between;
    font-size: var(--text-m);
    flex-wrap: wrap;
}

.empty-state {
    color: var(--darkgrey);
    text-align: center;
    padding: 56px 0;
}

/*select board meeting component*/
.select-meeting .option {
    padding: 12px;
}

.meeting-details-select:not(:last-child) { 
    margin-bottom: 4px;
}

/** user select list **/
.user-select-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-select-list-item {
    background-color: var(--white);
    border: var(--border);
    border-radius: var(--borderRadius);
    padding: 8px 12px 8px 8px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    cursor: pointer;
}

.user-select-list-item:hover {
    border-color: var(--mediumgrey);
}

.user-select-list-user {
    display: flex;
    gap: 8px;
    align-items: center;
}

.user-select-list-user .level {
    background-color: var(--black);
}

.user-select-list-user div.level {
    width: 3px;
    border-radius: var(--borderRadius);
    height: 40px;
    flex-shrink: 0;
}

.user-select-list-item.selected {
    font-weight: 600;
    border-color: var(--mediumgrey);
    background-color: var(--background);
}

@media (max-width:950px) {
    .task-page-section .titles-bar .buttons {
        width: 100%;
        display: flex;
        margin-top: 32px;
    }
    .task-page-section .titles-bar .buttons button {
        flex: 1;
        justify-content: center;
    }

    .task-page-container {
        flex-direction: column;
    }

    .task-page-container>div {
        width: 100% !important;
    }

    .task-page-content {
        display: none;
    }

    .task-actions .task-page-content {
        display: flex;
        flex-direction: column;
    }

    .task-actions .form-group,
    .task-actions .task-sender-comment {
        margin-bottom: 0px;
    }

    .task-actions {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

}

@media (max-width:600px) {
    .sent-task-header-pending {
        flex-direction: column;
        align-content: flex-start;
    }

    .sent-task-progress-update-button {
        border: var(--border) !important;
        width: 100%;
        padding: 16px 16px !important;
    }

    button.tertiary.sent-task-progress-update-button:hover {
        border: 1px solid var(--mediumgrey) !important;
    }
}

@media (max-width:560px) {
    .task-nav-buttons {
        flex-direction: column;
        gap: 8px;
        margin: 0;
    }

    .task-nav-buttons button {
        padding: 16px 24px;
        gap: 8px;
        border: var(--border);
        width: 100%;
        justify-content: center;
    }

    .task-page-content button {
        padding: 12px;
        gap: 8px;
        border: var(--border);
        width: 100%;
        justify-content: center;
    }

    .task-actions .uploaded-doc .icon.delete,
    .task-actions .uploaded-doc .icon-component.delete {
        display: block;
    }

    .task-nav-buttons button:hover,
    .task-page-content button:hover {
        opacity: 1!important;
    }
}