/* PROJECT BAR */
.project-bar {
    position: sticky;
    top: 0.5rem;
    z-index: 500;
    width: min(1400px, calc(100% - 2rem));
    margin: 0 auto 1.25rem;
    padding: 1rem 1.25rem;
    color: var(--text-main, #1e293b);
    background: linear-gradient(112deg, rgba(var(--primary-rgb, 211, 47, 47), .12), rgba(255, 255, 255, .96) 44%, rgba(var(--secondary-rgb, 255, 76, 76), .12));
    border: 1px solid rgba(var(--primary-rgb, 211, 47, 47), .16);
    border-radius: 1rem;
    box-shadow: 0 .65rem 1.8rem rgba(var(--primary-rgb, 211, 47, 47), .12);
    backdrop-filter: blur(12px);
}

.project-bar__heading,
.project-bar__identity,
.project-bar__owner { display: flex; align-items: center; }

.project-bar__heading { justify-content: flex-start; gap: .75rem; }
.project-bar__identity { min-width: 0; gap: .55rem; }

.project-bar__owner {
    flex: 0 0 auto;
    gap: .25rem;
    min-height: 2.35rem;
    padding: .25rem .55rem;
    color: #fff;
    background: var(--primary-color, #d32f2f);
    border-radius: .65rem;
    box-shadow: 0 .2rem .55rem rgba(var(--primary-rgb, 211, 47, 47), .2);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .045em;
}

.project-bar__owner-separator { opacity: .7; }

.project-bar__owner-initials--secondary {
    color: var(--primary-color, #d32f2f);
    background: #fff;
    border-radius: .3rem;
    padding: .08rem .27rem;
}

.project-bar__code {
    color: var(--primary-color, #d32f2f);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
    letter-spacing: .025em;
    text-decoration: none;
}

.project-bar__code:hover { color: var(--secondary-color, #ff4c4c); text-decoration: underline; }

.project-bar__status {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: .2rem .58rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.project-bar__status--option { color: #5d4b00; background: #fff4c7; border-color: #f2d982; }
.project-bar__status--progress { color: #084b97; background: #dcedff; border-color: #a9cfff; }
.project-bar__status--confirmed { color: #12623a; background: #dcf7e7; border-color: #a8e6c2; }
.project-bar__status--not-confirmed { color: #8a4b08; background: #ffedd5; border-color: #fdba74; }
.project-bar__status--cancelled,
.project-bar__status--deleted { color: #a02a2a; background: #ffe1e1; border-color: #ffc0c0; }
.project-bar__status--unknown { color: #525a66; background: #eef1f4; border-color: #d7dde4; }

.project-bar__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 2rem;
    padding: .35rem .55rem;
    color: #4b5563;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(75, 85, 99, .18);
    border-radius: .55rem;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.project-bar__copy:hover { color: var(--primary-color, #d32f2f); background: #fff; border-color: rgba(var(--primary-rgb, 211, 47, 47), .4); }
.project-bar__copy:active { transform: scale(.96); }
.project-bar__copy.is-copied { color: #12623a; background: #e3f8eb; border-color: #8bd4a9; }
.project-bar__copy.is-copied .project-bar__copy-label { font-size: 0; }
.project-bar__copy.is-copied .project-bar__copy-label::after { content: 'Copied'; font-size: .78rem; }
.project-bar__copy-icon { font-size: 1rem; line-height: 1; }

.project-bar__period {
    margin: 0 0 0 auto;
    color: var(--text-main, #1e293b);
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.35;
    white-space: nowrap;
    text-align: right;
}

.project-bar__details { margin-top: .85rem; }
.project-bar__toggle { display: none; }

.project-bar__facts {
    display: grid;
    grid-template-columns: minmax(12rem, 1.5fr) minmax(10rem, 1.2fr) minmax(9rem, 1.1fr) minmax(4rem, .45fr) minmax(9rem, 1fr) minmax(9rem, 1fr);
    gap: .55rem;
    margin: 0;
}

.project-bar__fact {
    min-width: 0;
    padding: .55rem .65rem;
    background: rgba(255, 255, 255, .52);
    border: 1px solid rgba(var(--primary-rgb, 211, 47, 47), .11);
    border-radius: .7rem;
}

.project-bar__fact dt {
    margin: 0 0 .18rem;
    color: var(--primary-color, #d32f2f);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .065em;
    line-height: 1.15;
    text-transform: uppercase;
}

.project-bar__fact dd {
    margin: 0;
    overflow: hidden;
    color: var(--text-main, #1e293b);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-bar__fact--client dd {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.project-bar__fact--client dd > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-bar__commission {
    flex: 0 0 auto;
    padding: .15rem .4rem;
    color: #7c2d12;
    background: #ffedd5;
    border: 1px solid #fdba74;
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 850;
    white-space: nowrap;
}

.project-bar__not-found { margin: 0; color: #a02a2a; font-weight: 700; }

.project-bar--extended {
    position: relative;
    top: auto;
}

.project-bar__extended {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
}

.project-bar__section {
    min-width: 0;
    padding: .8rem .9rem;
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(var(--primary-rgb, 211, 47, 47), .11);
    border-radius: .8rem;
}

.project-bar__section h2 {
    margin: 0 0 .6rem;
    color: var(--primary-color, #d32f2f);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.project-bar__section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.project-bar__facts--extended {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
}

.project-bar__facts--extended .project-bar__fact {
    padding: .45rem .5rem;
    border-color: rgba(var(--primary-rgb, 211, 47, 47), .08);
}

.project-bar__facts--extended .project-bar__fact dd {
    white-space: normal;
    overflow-wrap: anywhere;
}

.project-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.project-bar__action {
    display: flex;
    align-items: flex-start;
    min-width: min(100%, 17rem);
    flex: 1 1 17rem;
    gap: .5rem;
    padding: .55rem .65rem;
    border-left: 3px solid #94a3b8;
    border-radius: .45rem;
    background: rgba(255, 255, 255, .72);
    font-size: .8rem;
    line-height: 1.25;
}

.project-bar__action time {
    flex: 0 0 auto;
    color: #475569;
    font-weight: 800;
}

.project-bar__action span { display: grid; gap: .12rem; }
.project-bar__action small { color: #64748b; font-size: .76rem; }
.project-bar__action--overdue { border-left-color: #dc2626; background: #fff5f5; }
.project-bar__action--imminent { border-left-color: #d97706; background: #fffbeb; }
.project-bar__empty, .project-bar__section--notes p { margin: 0; color: #64748b; font-size: .84rem; line-height: 1.45; }

.project-bar__section--notes p { white-space: normal; }

@media (max-width: 1100px) {
    .project-bar__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .project-bar {
        top: .35rem;
        width: calc(100% - 1rem);
        margin-bottom: .8rem;
        padding: .8rem .9rem;
        border-radius: .85rem;
    }

    .project-bar__heading { align-items: center; flex-wrap: wrap; gap: .45rem; }
    .project-bar__identity { width: 100%; flex-wrap: wrap; }
    .project-bar__owner + .project-bar__identity { width: auto; flex: 1 1 15rem; }
    .project-bar__period { width: 100%; margin-left: 0; font-size: .82rem; text-align: left; }
    .project-bar__details { margin-top: .6rem; }
    .project-bar__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: .45rem 0 0;
        color: var(--primary-color, #d32f2f);
        cursor: pointer;
        font-size: .78rem;
        font-weight: 800;
        list-style: none;
        text-transform: uppercase;
    }
    .project-bar__toggle::-webkit-details-marker { display: none; }
    .project-bar__toggle-icon { width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
    .project-bar__details[open] .project-bar__toggle-icon { transform: rotate(225deg) translate(-2px, -2px); }
    .project-bar__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .65rem; }
    .project-bar__section-grid { grid-template-columns: 1fr; }
    .project-bar__facts--extended { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .project-bar__facts { grid-template-columns: 1fr; }
    .project-bar__copy-label { display: none; }
    .project-bar__copy { padding-inline: .48rem; }
    .project-bar__facts--extended { grid-template-columns: 1fr; }
}