/* Task-specific layout on top of the copied main_sys / lists / filters / popups CSS. */
:root {
    --color-primary: #236897;
    --color-secondary: #000;
    --vt-draft: #8995a3;
    --vt-published: #bd9236;
    --vt-in_progress: #4f89b2;
    --vt-done: #58a889
}

body.vtasks-system {
    background: #F9F9F9 !important;
    color: #333
}

body.vtasks-system * {
    font-family: Rubik, sans-serif
}

[hidden] {
    display: none !important
}

.vtPage,
.vtPageBoard {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto
}

.vtMuted {
    font-size: 14px;
    color: #647787;
    overflow-wrap: anywhere;
    width: 100%;
}

.vtMuted bdi {
    font-size: 14px;
    color: #647787;
}

.vtUsRol {
    font-size: 12px;
    color: #647787;
    overflow-wrap: anywhere;
    padding: 5px 10px;
    background-color: #efefef;
    font-weight: 500;
    border-radius: 7px;
}

.button_container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.vtWelcome {
    flex-direction: column;
    justify-content: center;
    padding: 35px;
    text-align: center
}

.vtWelcome h1 {
    font-size: 30px;
    font-weight: 500
}

.vtTotals {
    display: flex;
    gap: 15px;
    width: 100%;
    margin: 15px 0
}

.vtTotal {
    flex: 1;
    background: #eff1f3;
    border-radius: 20px;
    padding: 25px 15px 10px;
    position: relative;
    text-align: center
}

.vtTotalLabel {
    position: absolute;
    top: -10px;
    right: 15px;
    background: white;
    border-radius: 60px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #236897
}

.vtTotalValue {
    font-size: 28px;
    color: #236897
}

.vtSpacer {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    font-size: 14px;
    font-weight: 500
}

.vtSpacer hr {
    flex: 1;
    border: 0;
    height: 1px;
    background: #ccc
}

.vtInbox {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%
}

.topPannelControle {
    background: #f1efef;
    gap: 10px
}

.topPannelControle .listFiltersContainerBox {
    width: auto;
    flex: 1;
    min-width: 120px
}

.vtArchive {
    width: 100%
}

.vtProjectCard {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0px;
}

.vtProjectName {
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    color: #236897
}

.vtStatusCounts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 100%;
}

.vtStatusBadge {
    padding: 3px 10px;
    border-radius: 25px;
    background: #eff1f3;
    font-size: 12px;
    color: #fff;
    font-weight: 500
}

.vtStatusBadge.vt-published {
    background-color: #bd9236;
}

.vtStatusBadge.vt-in_progress {
    background-color: #4f89b2;
}

.vtStatusBadge.vt-done {
    background-color: #58a889;
}

.vtProjectHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap
}

.vtProjectHeader h1 {
    text-align: right;
    font-size: 26px;
    font-weight: 500
}

.vtBoardFilters input:not([type=checkbox]),
.vtBoardFilters select {
    width: auto;
    flex: 1;
    min-width: 130px;
    border-radius: 25px;
    background: #fff;
    border: 1px solid #efefef;
    padding: 8px 12px;
    font-size: 13px
}

.vtBoardFilters .vtBoardSearch {
    flex: 2
}

.vtCheck {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 13px
}

.vtBoard {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    align-items: start;
    width: 100%
}

.vtColumn {
    min-width: 0;
    min-height: 380px;
    background: #eff1f3;
    border-radius: 24px;
    padding: 12px;
    --status: var(--vt-draft)
}

.vt-published {
    --status: var(--vt-published)
}

.vt-in_progress {
    --status: var(--vt-in_progress)
}

.vt-done {
    --status: var(--vt-done)
}

.vt-draft {
    --status: var(--vt-draft)
}

.vtColumnHeader {
    padding: 5px 3px 12px;
    border-bottom: 3px solid var(--status);
    margin-bottom: 10px
}

.vtColumnHeader h2 {
    font-size: 15px;
    font-weight: 500;
    text-align: right
}

.vtColumn .listTopController {
    gap: 5px
}

.vtColumn .limitItemsFilterContainerBox {
    width: auto;
    flex: 0
}

.vtColumn .limitItems {
    font-size: 11px;
    padding: 3px;
    width: 50px
}

.vtColumn .counters {
    font-size: 11px
}

.vtColumn .listTopController {
    margin-bottom: 10px
}

.vtTask {
    padding: 12px;
    display: block;
    border-radius: 20px;
    min-width: 0;
    width: 100%
}

.vtTaskHeader {
    display: flex;
    gap: 5px;
    align-items: center;
    border-bottom: 1px solid #f1f2f3;
    padding-bottom: 9px;
    margin-bottom: 9px
}

.vtTaskId,
.vtTaskNumber {
    font-size: 11px;
    color: #647787
}

.vtStatusButtons {
    margin-right: auto;
    display: flex;
    gap: 5px
}

.vtMove {
    background: var(--status);
    color: white;
    border: 0;
    border-radius: 50px;
    padding: 2px 6px;
    min-width: 23px;
    font-size: 12px;
    cursor: pointer
}

.vtMove[aria-pressed=true] {
    outline: 2px solid var(--status);
    outline-offset: 2px
}

.vtTaskTitle {
    display: flex;
    gap: 7px;
    align-items: flex-start
}

.vtTaskTitle b {
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere
}

.vtStar {
    width: 29px;
    height: 29px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    clip-path: polygon(50% 0, 63% 31%, 98% 36%, 72% 60%, 79% 96%, 50% 79%, 21% 96%, 28% 60%, 2% 36%, 37% 31%);
    background: #f3df9c;
    color: #624f14;
    font-size: 12px;
    font-weight: 500
}

.vtTaskDescription {
    font-size: 12px;
    line-height: 1.6;
    color: #647787;
    white-space: normal;
    overflow-wrap: anywhere;
    margin: 8px 0
}

.vtTaskEmail {
    font-size: 12px;
    color: #236897;
    display: block;
    overflow-wrap: anywhere
}

.vtTask .button_container {
    margin-top: 10px;
    justify-content: space-between
}

.vtTask .miniButton {
    font-size: 11px;
    padding: 5px 8px
}

.vtRejected {
    width: 100%
}

.vtRejected .accordionButton {
    width: 100%
}

.vtRejected .accordionContent {
    padding: 15px;
    background: transparent
}

.vtRejected .listItemContainer {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.vtSaveForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px
}

.vtSaveForm label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px
}

.vtSaveForm textarea {
    min-height: 100px
}

.vtFormGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%
}

.vtFull {
    grid-column: 1/-1
}

.vtPriorityField {
    border: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.vtPriorityField legend {
    font-size: 13px
}

.vtPriorityOption {
    align-items: center !important;
    gap: 0 !important
}

.vtPriorityOption span {
    font-size: 23px;
    color: #bd9236
}

.vtPriorityOption small {
    font-size: 11px
}

.vtInlineForm {
    margin-top: 20px;
    flex-direction: row;
    align-items: end;
    flex-wrap: wrap
}

.vtInlineForm label {
    flex: 1;
    min-width: 150px
}

.vtOwnershipRow {
    margin-top: 10px;
    background: #f9f9f9
}

.vtTask[aria-busy=true] {
    opacity: .55
}

.vtBoard .listItemContainer {
    counter-reset: vt-task
}

.vtTaskNumber::before {
    counter-increment: vt-task;
    content: counter(vt-task)
}

@media(max-width:1000px) {
    .vtBoard {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sysHeader {
        height: auto;
        min-height: 70px;
        flex-wrap: wrap
    }

    .vtRejected .listItemContainer {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:600px) {
    .vtBoard {
        grid-template-columns: 1fr
    }

    .vtColumn {
        min-height: 150px
    }

    .vtFormGrid {
        grid-template-columns: 1fr
    }

    .vtTotals {
        flex-wrap: wrap
    }

    .vtTotal {
        min-width: 100px
    }

    .vtRejected .listItemContainer {
        grid-template-columns: 1fr
    }

    .vtProjectHeader {
        width: 100%
    }

    .vtProjectHeader h1 {
        font-size: 23px
    }

    .vtBoardFilters {
        width: 100%
    }
}

.vtCheck {
    flex-shrink: 0;
    width: auto !important;
    white-space: nowrap
}

.vtCheck input {
    width: auto !important;
    margin: 0
}

.vtColumn .listTopController {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 0
}

.vtColumn .spaceListTopController {
    flex: 1
}

/* Existing accordion structure for every status; rejected tasks form one full-width list. */
.vtColumn {
    min-height: 0;
    padding: 0;
    background: transparent
}

.vtStatusAccordion {
    width: 100%;
    border-radius: 24px;
    background: #eff1f3;
    --status: var(--vt-draft)
}

.vtAccordion-published {
    --status: var(--vt-published)
}

.vtAccordion-in_progress {
    --status: var(--vt-in_progress)
}

.vtAccordion-done {
    --status: var(--vt-done)
}

.vtAccordion-rejected {
    --status: #bd7373
}

.vtStatusAccordion>.accordionButton {
    width: 100%;
    padding: 15px;
    background: #fff;
    border-radius: 24px;
    box-shadow: none;
    border-bottom: 3px solid var(--status);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    text-align: right
}

.vtStatusAccordion>.accordionButton .accordionTitle {
    font-size: 14px;
    font-weight: 500
}

.vtStatusAccordion>.accordionButton .accordionArrow {
    flex-shrink: 0
}

.vtStatusAccordion>.accordionButton .accordionArrow svg {
    width: 14px;
    height: 14px
}

.vtStatusAccordion>.accordionContent {
    padding: 12px;
    background: transparent;
    box-shadow: none;
    border-radius: 0 0 24px 24px;
    position: relative;
    width: 100%;
    min-width: 0
}

.vtRejected>.accordionContent .listItemContainer {
    grid-template-columns: 1fr
}

.vtRejected .vtTask {
    display: block;
    width: 100%
}

.vtRejected .vtTaskDescription {
    margin: 5px 0
}

.vtRejected .vtTaskTitle {
    align-items: center
}

.vtRejected>.accordionButton {
    color: #333
}

.vtPageBoard .dropDownContentContainerUserInfo {
    max-width: calc(100vw - 30px)
}

.vtStatusAccordion {
    padding: 0
}

.vtStatusAccordion>.accordionButton {
    box-sizing: border-box
}

/* Member rows reuse listContainer/listItemContainer, with no pagination or table. */
.vtMembersList {
    width: 100%
}

.vtMembersList .listItemContainer {
    grid-template-columns: 1fr;
    gap: 12px
}

.vtMember {
    width: 100%;
    background: #f9f9f9;
    gap: 12px
}

.vtMemberMain {
    min-width: 0;
    flex: 1
}

.vtMemberEmail {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #236897;
    overflow-wrap: anywhere
}

.vtMemberDetails {
    display: flex;
    gap: 7px 15px;
    flex-wrap: wrap;
    margin: 6px 0;
    font-size: 12px;
    color: #647787
}

.vtMember .button_container {
    flex-shrink: 0
}

@media(max-width:600px) {
    .vtMember {
        align-items: flex-start
    }

    .vtMemberMain {
        flex-basis: 100%
    }

    .vtMember .button_container {
        width: 100%
    }
}


/* Original CCPRO dashboard section dividers. */
.spacer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
}

.spacer_text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.spacer_hr {
    flex-grow: 1;
    height: 1px;
    background-color: #ccc;
    margin: 0 30px;
}

.vtDashboardGroup {
    width: 100%;
    min-width: 0
}

.vtDashboardList {
    width: 100%;
    margin: 18px 0 26px
}

.vtDashboardEmpty {
    padding: 10px 0
}

.vtDashboardDeclined>.accordionSingleBox {
    width: 100%
}

.vtDashboardDeclined .accordionButton {
    box-sizing: border-box;
    width: 100%
}

.vtDashboardDeclined .accordionContent {
    width: 100%
}

.vtDashboardDeclined .vtDashboardList {
    margin: 5px 0
}

.vtDashboardGroup .spacer_text {
    flex-shrink: 0
}

@media(max-width:600px) {
    .vtDashboardGroup .spacer {
        flex-wrap: wrap;
        gap: 10px
    }

    .vtDashboardGroup .spacer_text {
        flex-shrink: 1
    }

    .vtDashboardGroup .spacer_hr {
        margin: 0 10px
    }
}