/***********************************************************
 * Project View
 ***********************************************************/
#project-header {
    /*position: sticky;*/
    /*top: 0;*/
    /*z-index: 1000;*/

    margin: 20px 7px 20px 82px;          /* top, right, bottom, left */
    /*padding: 20px 22px 20px 80px;        !* top, right, bottom, left *!*/
}

.subproject-header {
    padding: 7px 80px;                  /* top-bottom, right-left */
    /*font-size: small;*/
    font-size: medium;
    font-weight: bold;
}

.project-title {
    line-height: normal;
}

.project-header-button {
    /*something*/
}

.project-header-button > img {
    height: 28px;
}

.project-header-button:hover,
.project-header-button.active {
    background: var(--g4);
}

/*.subproject-header:nth-of-type(n) {*/
/*    padding-left: calc( (n - 1) * 3em );*/
/*}*/

/* hover button on old project title */
#main > .row > .col-xl-12 > h3:not(:hover) > button {
    display: none;
    /*opacity: 0;*/
}

/* active tab styling in project header */
nav.nav > a.nav-link.active,
nav.nav > a.nav-link:not(.active):hover {
    text-decoration: underline;
    text-underline-offset: 0.4em;
}

nav.nav > a.nav-link:not(.active) {
    color: var(--bs-secondary-color);    /* text-secondary */
}

/* card border */
.card-container:not(.expanded) > .card {
    border-color: darkgray;
}

.card-container.expanded > .card {
    /*border-width: medium;*/
    border-color: darkgray;
    /*box-shadow: 0 0 10px #777777;*/
    box-shadow: 0 0 10px #aaa;
    /*margin-bottom: 30px;*/
}

.card-container.expanded > .card > .card-header {
    padding: 1em;
}

/* card-body general styling */
.card-container:not(.expanded) > .card > .card-body {
    padding: 0;
}

/* hide card description when not expanded */
.card-container:not(.expanded) > .card:has( > ul ) > .card-body {
    display: none !important;
    border-width: 0 !important;

    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.card-container.expanded > .card > .card-footer {
    display: none !important;
}

/* no borders for the nested ul */
/* this is important for the project-files page too */
ul.list-group > li.list-group-item > ul.list-group > li.list-group-item,
ul.list-group > li.list-group-item > .collapse > ul.list-group > li.list-group-item,
ul.list-group > li.list-group-item > .collapsing > ul.list-group > li.list-group-item {
    padding-right: 0;
    border: 0;
}

.card-container:not(.expanded) > .card > .card-body > ul.list-group > li.list-group-item > ul.list-group {
    display: none;
}

.card-deck {
    /*display: flex;*/
    /*flex-wrap: wrap;*/
}

.card-container {
    position: relative;
    transition: width 0.5s ease !important;  /* THIS WORKS */
    /*transition: all 0.5s ease;*/
    /*order: initial; !* Moves the item to the original position *!*/
    padding: 0 10px 10px 10px;
}

/* Expanded item styles */
.card-container.expanded {
    width: 100%;
    /*order: -1; !* Moves the item to the top *!*/
}

.card > .card-header {
    position: relative;
    display: flex;                  /* Enables Flexbox on .card-header */
    align-items: center;            /* Vertically centers children within .card-header */
    justify-content: space-between; /* Ensures .menu-container is pushed to the right */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* list-indent */
.list-indent {
    padding-left: 3em;
}

/* make the <li> of the project files transparent */
ul > li > div > ul > li {
    background: transparent !important;
}

.list-double-indent {
    padding-left: 6em;
}

/* hover on subproject when not expanded card */
.card-container:not(.expanded) > .card > .card-body > ul.list-group > li.list-group-item:hover {
    background: rgba(33, 37, 41, 0.03);
}

.card-container:not(.expanded) > .card > .card-body > ul.list-group > li.list-group-item:first-child {
    display: none;
}

.card-container.expanded > .card > .card-body > ul.list-group > li.list-group-item {
    border: 0;
}

.job {
    padding: 5px 15px;
    margin: 5px 5px;
    border-radius: 25px;
    border: 1px solid #B99F89;
    /*color: #666666 !important;*/
    /*background: #FFCCA6;                !* darker *!*/
    background: #FFF5ED;                /* lighter */
}

.job:hover {
    /*background: #FFF5ED;                !* lighter *!*/
    background: #FFCCA6;                /* darker  */
}

.note {
    padding: 5px 15px;
    margin: 5px 5px;
    border-radius: 25px;
    border: 1px solid #78CAFF;
    /*color: #666666 !important;*/
    /*background: #B5D6EB;                !* darker  *!*/
    background: #E3F2FB;                /* lighter */
}

.note:hover {
    background: #B5D6EB;                /* darker  */
    /*background: #E3F2FB;                !* lighter *!*/
}

/* accordion stuff */
.card-container:not(.expanded) > .list-group > .list-group-item > .accordion > .accordion-item {
    border-top-width: 2px;
}

.accordion-button:not(.collapsed) {
    background: transparent !important;
}

.accordion-body > .accordion {
    padding-left: 5em;
    /*background: rgb(222, 226, 230);*/
}

.accordion > .accordion-item {
    border-bottom: 0 !important;
}

.project-description:not(.active) {
    height: 2.7lh;                      /* Set the height in line height units */
    overflow: hidden;                   /* Hide content that overflows the div */
    position: relative;
}

.project-description:not(.active)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5lh;     /* Height of the gradient fade */
    background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1)
    );
}

.project-description-toggle {
    width: 100%;
    border: 0;
    background: #dddddd;
    margin-bottom: 0.5em;
    font-weight: bold;
    color: #666;
    /*border-radius: 10px;*/
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.project-description-toggle:hover {
    background: lightgray;
}

.project-description-toggle:not(.active) > .less,
.project-description-toggle.active       > .more {
    display: none;
}

/* hide card-menu when small - only first 3 */
/*.card-container:nth-child(-n+3):not(.expanded) > .card > .card-header > .card-menu-container {*/
/*    display: none;*/
/*}*/
/*.card-container:nth-child(-n+3).expanded > .card > .card-header {*/
/*    cursor: default;*/
/*}*/

/* hide card-menu when small - all of them */
.card-container:not(.expanded) > .card > .card-header > .card-menu-container {
    display: none !important;
}
.card-container.expanded > .card > .card-header {
    cursor: default;
}



/***********************************************************
 * Subproject cards
 ***********************************************************/
.subproject-card-container {
    /* something */
}
.subproject-card {
    box-shadow: 0 6px 10px 4px #00000026;
    border-radius: 15px;
    border: 0;
}
.subproject-title-container {
    padding: 0 22px;
}
.subproject-title {
    font-size: 20px;
}
.subproject-count {
    font-size: 24px;
    /*margin-left: 0.5em;*/
}
.subproject-child-deck {
    background: transparent;
}
.subproject-child {
    display: block !important;
    background: transparent;
    border-bottom: none;

    /*padding-left:  2px;*/
    /*padding-right: 2px;*/
    padding: 0;
}
.subproject-child-title {
    font-size: 16px;
    font-weight: normal;
    line-height: normal
}
.subproject-child-count {
    /*margin-left: 1em;*/
    /*vertical-align: top;*/
}



/***********************************************************
 * Old project page
 ***********************************************************/
/* ... */



/***********************************************************
 * Kanban jobs
 ***********************************************************/
.kanban-jobs {
    margin-left: 0;
    margin-right: 0;
    padding: 1em 1em 1.25em 1em;
}



/***********************************************************
 * Progress bar
 ***********************************************************/
.progress {
    height: 2em;
    margin-top: 0.5em;
}

.progress > .progress-bar {
    height: 100%;
    background-color: #e9ecef !important;
    border-right: 4px solid #14532d; !important /* Tailwind dark green */
}

.progress-date {
    font-size: 12px;
    opacity: 40%;
}



/***********************************************************
 * Board View (Kanban Style)
 ***********************************************************/
.board {
    /*position: relative;*/
    height: 100%;
    width: 100%;
    overflow: auto;
}

.board > .list {
    /*display: flex;*/
    display: inline-flex;
    flex-direction: column; /* Aligns the cards vertically */
    padding: 15px;
    /*height: 100%;*/
    width: 250px;
    border-radius: 20px !important;
    border-style: solid;
    border-width: 1px;
    border-color: #dfdfdf;
    background: #c0d2de !important;  /* light blue */
    /*background: #dfe1e0 !important;  !* grey *!*/
}

.board > .list:not(:last-child) {
    margin-right: 10px;
}

.board > .list > .card {
    flex: 1 1 auto; /* Ensures each card takes up the full width of the .list */

    /*display: block;*/
    /*width: 100%;*/
    /*width: 200px !important;*/
}

.board > .list > .card:not(:last-child) {
    margin-bottom: 18px;
}

.board > .list > .card > .card-header {
    /*font-weight: bold;*/
    /*color: #666;*/
    /*background: #f5f5f5;*/
}



/***********************************************************
 * Project Files
 ***********************************************************/
.file-container {
    margin-top: 1em;
    margin-bottom: 1em;
}

.collapse > .file-container {
    margin: 0 !important;
}

.file-container > li.list-group-item:hover {
    background: rgba(33, 37, 41, 0.03);
}

.file-container > li.list-group-item > button.btn-default {
    padding-top: 0;
    padding-bottom: 0;
}

/*.file-container > li.list-group-item:not(:hover) > span,*/
/*.file-container > li.list-group-item:not(:hover) > button.btn-default {*/
/*    display: none;*/
/*}*/

/* enable the hover effect on project files */
.file-container > li.list-group-item:not(:hover) > div.flex-center:last-child > span,
.file-container > li.list-group-item:not(:hover) > div.flex-center:last-child > button,
.file-container > li.list-group-item:not(:hover) > div.flex-center:last-child > a {
    /*display: none;*/
}

.file-container > li.list-group-item > div.flex-center:last-child > button:hover > i.fa-eye,
.file-container > li.list-group-item > div.flex-center:last-child > button:hover > i.fa-download {
    color: black !important;
}

.file-container .btn-outline-primary {
    /*padding-top: 2px;*/
    /*padding-bottom: 0;*/
    padding: 1px 7px 0 7px;
}

.collapse.show:has(.file-container) > ul.list-group,
.collapsing:has(.file-container)    > ul.list-group {
    margin-top: 0 !important;
}



/***********************************************************
 * Collapse
 ***********************************************************/
/*collapse-button {*/
li.list-group-item > .collapse-button {
    width: 100%;
    text-align: left;
    font-weight: bold;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
}

/*.collapse-button > i {*/
li.list-group-item > .collapse-button > i {
    color: green;
    transition: all 0.5s ease;
}

.collapse-button.active > i {
    color: darkgreen;
    transform: rotate(90deg);
}

.collapse-button:not(.active) > .collapse-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collapse-button.active > .collapse-title {
    color: #054C7C;
}

.collapse-button.active > .badge {
    display: none;
}

.collapse.show > ul.list-group,
.collapsing    > ul.list-group {
    margin-top: 1em;
}

/* when the collapse button is active, apply these to the collapse element */
li.list-group-item:has( > .collapse-button.active ) > .collapsing,
li.list-group-item:has( > .collapse-button.active ) > .collapse.show {
    margin-top: 0.5em;
    padding-top: 0.5em;
    margin-bottom: 1em;
    border-top: 1px solid rgb(222, 226, 230);
}

.project-segment {
    /*padding-left: 1em;*/
    /*margin-bottom: 1.5em;*/
}

.project-members,
.project-files,
.project-calendar,
.project-gantt,
.project-info {
    display: none;
}

.project-menu {
    position: relative;
    width: 100%;
    padding-left: 0.5em;
    margin: 4px 0 8px 0;
}

.subproject-menu-users {
    float: right !important;
    /*position: relative;*/
    /*right: 3em;*/
    /*margin-right: 2em;*/
    /*gap: 7px;                             !* Adds space between buttons *!*/
    /*display: flex;*/
    /*align-items: center;                  !* Vertically centers the .menu-item *!*/
    /*justify-content: center;              !* Horizontally centers the .menu-item *!*/
}

.subproject-menu > .nav-link:first-child {
    /*padding-left: 0.5em;*/
}

.subproject-segment {
    padding-left: 1em;
    margin-bottom: 1.5em;
}

.subproject-jobs {
    /* something */
}

.subproject-files {
    display: none;
}

.subproject-info {
    display: none;
    padding-top: 0.5em;
}

/* sub-subproject styling */
li.list-group-item:has( > .collapse > ul.list-group > li.list-group-item > .collapse-button.active ) > .collapse > nav.subproject-menu,
li.list-group-item:has( > .collapse > ul.list-group > li.list-group-item > .collapse-button.active ) > .collapse > .subproject-segment {
    display: none !important;
}

/*li.list-group-item:has( > .collapse > ul.list-group > li.list-group-item > .collapse-button.active ):not( > .collapse > ul.file-container ) > .collapse > ul.list-group {*/
li.list-group-item:has( > .collapse > ul.list-group > li.list-group-item > .collapse-button.active ) > .collapse > ul.list-group {
    margin-top: 0;
}