#content:has(div#tasks-list-page) {
    /* The page background will be grey only when the tasks page is there */
    background-color: var(--bs-tertiary-bg);
}

/***********************************
 *                  GLOBAL VARIABLES
 ***********************************/

#tasks-list-page {
    --gray-400: #A1A1AA;
    --bs-secondary: #71717A;
    --header-color: #666666;

    --collapsible-border-radius: .75rem;
    --collapsible-shadow-width: 1.5rem;

    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

#tasks-list-page .oo-collapsible-menu {
    box-shadow: 0px 2px var(--collapsible-shadow-width) 0px rgba(0, 65, 161, 0.05);
    border-radius: var(--collapsible-border-radius);
}

/***********************************
 *                 FILTERS BLOCK NAV
 ***********************************/

.oo-tab-group {
    --bs-nav-pills-link-active-color: var(--bs-primary);
    --bs-nav-pills-link-active-bg: none;
    --bs-nav-link-color: currentColor;
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color)
}

.oo-tab-group .nav-item {
    position: relative;
}

.oo-tab-group .nav-link::after {
    height: 0;
    transition: height .25s ease-in;
}

.oo-tab-group .nav-link::after {
    --nav-link-active-underline-height: .25rem;
    content: '';
    height: var(--nav-link-active-underline-height);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--bs-primary);
    border-top-left-radius: var(--nav-link-active-underline-height);
    border-top-right-radius: var(--nav-link-active-underline-height);
    transition: all .1s ease-in-out;
    transition-property: height, border-radius;
}

.oo-tab-group .nav-link[disabled]::after,
.oo-tab-group .nav-link:not(.active)::after {
    --nav-link-active-underline-height: 0;
}

/***********************************
 *                    FILTERS ACTION
 ***********************************/

/* Masking Bootstrap pseudo-element to use our own */
.oo-filters-action .dropdown-toggle::after {
    content: none
}

.oo-filters-action .dropdown-toggle:hover {
    background-color: var(--bs-secondary-bg);
}

.oo-filters-action .dropdown-menu {
    --bs-dropdown-min-width: 13.75rem;
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-padding-y: .5rem;
    --bs-dropdown-box-shadow: 0 .25rem .5rem rgba(0, 0, 0, 0.08);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.oo-filters-action .dropdown-header {
    --bs-dropdown-header-padding-x: .75rem;
    --bs-dropdown-header-padding-y: .5rem;
}

.oo-filters-action .dropdown-header .btn {
    --bs-btn-border-width: 0;
}

.oo-filters-action .dropdown-item {
    --bs-dropdown-item-padding-x: .75rem;
    --bs-dropdown-item-padding-y: .25rem;
}

.oo-filters-action .dropdown-item.oo-dropdown-search {
    --bs-dropdown-item-padding-x: .5rem;
    --bs-dropdown-item-padding-y: .5rem;
}

.oo-filters-action .dropdown-divider {
    --bs-dropdown-divider-margin-x: .75rem;
    --bs-dropdown-divider-margin-y: .25rem;
    margin-left: var(--bs-dropdown-divider-margin-x);
    margin-right: var(--bs-dropdown-divider-margin-x);
}

.oo-filters-action.values-selected > .dropdown-toggle {
    border-color: var(--bs-primary);
}

.oo-filters-action.values-selected > .dropdown-toggle svg {
    fill: var(--bs-primary);
}

/***********************************
 *                      GRID DISPLAY
 ***********************************/

.oo-tasks-group-row {
    --oo-main-button-size: 20px;
    --associated-to-width: minmax(0, 2fr);
    display: grid;
    grid-template-columns: calc(2*var(--oo-main-button-size)) 3fr var(--associated-to-width) 1fr 150px 120px;
    grid-template-areas: "main_action title associated_to assigned_to due_date quick_actions";
    padding: .5em .5em;
    column-gap: .25em;
    position: relative;
    background-color: var(--bs-body-bg);
}
.oo-tasks-group-row.minimal-associated_to-section {
    --associated-to-width: 90px;
}
.oo-tasks-group-row.minimal-associated_to-section > [data-area="associated_to"] .object-title {
    display: none;
}

.oo-tasks-group-row > [data-area="main_action"] {
    grid-area: main_action;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: var(--oo-main-button-size);
    height: var(--oo-main-button-size);
}

.oo-tasks-group-row > [data-area="title"] {
    grid-area: title;
}

.oo-tasks-group-row > [data-area="associated_to"] {
    grid-area: associated_to;
}

.oo-tasks-group-row > [data-area="assigned_to"] {
    grid-area: assigned_to;
}

.oo-tasks-group-row > [data-area="due_date"] {
    grid-area: due_date;
}

.oo-tasks-group-row > [data-area="quick_actions"] {
    grid-area: quick_actions;
}

/* Kinda hacky imo since we override values rendered from
Phosphor compiled JSX. But we had unexplainable warnings
when passing our css var as a string to phosphor component
through its react props in our JSX even though it worked */
.oo-tasks-group-row > [data-area="main_action"] svg {
    width: var(--oo-main-button-size);
    height: var(--oo-main-button-size);
}

/***********************************
 *               TASK LIST CONTAINER
 ***********************************/

.oo-task-list-container {
    container-name: tasksList;
    container-type: inline-size;
    background-color: var(--bs-border-color);
    display: flex;
    flex-direction: column;
    row-gap: var(--bs-border-width);
}

@container tasksList (width <= 768px)
{
    .oo-tasks-group-row {
        grid-template-columns: min-content min-content 1fr min-content;
        row-gap: .25rem;
        column-gap: .75rem;
        grid-template-areas: 
            "main_action title title quick_actions"
            ". associated_to associated_to associated_to"
            ". assigned_to due_date due_date";
    }

    .oo-task-group-header {
        display: none;
    }
}

/***********************************
 *                 TASK GROUP HEADER
 ***********************************/

 .oo-task-group-header {
    color: var(--header-color);
}

/***********************************
 *                         TASK ITEM
 ***********************************/

.oo-taskitem {
    width: 100%;
}

.oo-taskitem:not([disabled]) {
    cursor: pointer;
}

.oo-taskitem a {
    color: var(--bs-body-color)
}

.oo-taskitem:hover:not([disabled]) {
    background-color: var(--bs-tertiary-bg);
}

.oo-quickaction {
    transition: all .25s ease-in-out;
    opacity: 1;
    padding: .25rem;
    border-radius: 50%;
}

.oo-quickaction:hover {
    background-color: var(--bs-secondary-bg);
    fill: var(--bs-body-color)
}

.oo-quickaction[disabled]:not(.selected) {
    visibility: hidden;
} 

.oo-taskitem:not(:hover) .oo-quickaction:not(.selected) {
    transition: none;
    opacity: 0;
}

/***********************************
 *                             UTILS
 ***********************************/

.max-w-20 {
    max-width: 20em;
}

.max-h-18 {
    max-height: 18em;
}

.opacity-10 {
    opacity: 0.1;
}

.opacity-40 {
    opacity: 0.4;
}

.dirty-pastille::after {
    content: "";
    --dirty-pastille-size: .5em;
    display: block;
    width: var(--dirty-pastille-size);
    height: var(--dirty-pastille-size);
    position: absolute;
    background-color: orange;
    border-radius: var(--dirty-pastille-size);
    left: calc(100% - var(--dirty-pastille-size) / 2);
    bottom: calc(100% - var(--dirty-pastille-size) / 2);
}

/***********************************
 *                     BOARD DISPLAY
 ***********************************/

#content-container:has(#tasks-list-page .display-board) {
    overflow: auto;
    overflow-x: hidden;
}

#container:has(#tasks-list-page .display-board) #footer {
    flex-shrink: 0;
}

.display-board {
    min-height: 0;
    padding: var(--collapsible-shadow-width);
    margin-top: calc(-1 * var(--collapsible-shadow-width));
    margin-left: calc(-1 * var(--collapsible-shadow-width));
    margin-right: calc(-1 * var(--collapsible-shadow-width));
    flex-direction: row;
}

.display-board .oo-collapsible-menu {
    min-width: 330px;
    transition: gap .35s ease, min-width .15s ease-out;
}

.display-board .oo-collapsible-menu {
    height: 100%;
}

.display-board .oo-collapsible-menu:has(.collapse:not(.show)) {
    writing-mode: vertical-rl;
    min-width: fit-content;
}

.display-board .oo-collapsible-menu .collapse {
    overflow-y: auto;
}

/***********************************
 *                       DRAG N DROP
 ***********************************/

.oo-taskitem.drag-image {
    width: 100%;
    transform: rotate(-7deg);
    background-color: var(--bs-body-bg);
    box-shadow: 0px 0px 1em 0px rgba(0, 65, 161, 0.05);
}

.drag-image-container {
    --drag-x : 0px;
    --drag-y : 0px;
    width: 350px;
    background-color: transparent;
    transform: translate(calc(var(--drag-x) - 50%), var(--drag-y));
}