/* ============================================================================
   proposal-details.css
   Proposal Details page and the Approvals Timeline component.

   Builds on application-review.css (section card, field label, skeleton,
   state panels, table, remark block, breadcrumb) and uses its --arv-* colour
   tokens, so the card header picks up whatever colour is set there.

   Prefix: pdt- (Proposal DeTails).
   Loaded from Components/App.razor AFTER application-review.css and
   approvals.css.
   ========================================================================= */

/* ------------------------------------------------------ Summary card */

.pdt-summary__header {
    align-items: center;
}

.pdt-summary__heading-text {
    min-width: 0;
}

.pdt-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Label above, plain value below. The label reuses .arv-field__label. */
.pdt-value {
    margin: 0.3rem 0 0;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--arv-value, #1d2b22);
    overflow-wrap: anywhere;
}

.pdt-value--mono {
    font-family: var(--arv-mono);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.pdt-value--muted {
    font-weight: 400;
    font-style: italic;
    color: var(--arv-label, #6b7a70);
}

.pdt-value--id {
    font-family: var(--arv-mono);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--arv-label, #6b7a70);
    word-break: break-all;
}

/* ------------------------------------------------ Stage / status pills */

.pdt-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.12rem 0.6rem;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5;
    white-space: nowrap;
}

.pdt-pill--stage {
    background-color: var(--arv-accent-soft, #e8f3ec);
    color: #0f5132;
    border-color: #bcdcc8;
}

.pdt-pill--info {
    background-color: #e7f1fb;
    color: #0a4c86;
    border-color: #bcd8f0;
}

.pdt-pill--success {
    background-color: #d1e7dd;
    color: #0f5132;
    border-color: #a3cfbb;
}

.pdt-pill--danger {
    background-color: #fdf0ef;
    color: #842029;
    border-color: #f3ccc9;
}

.pdt-pill--neutral {
    background-color: #eef1ef;
    color: #4d5b53;
    border-color: var(--arv-line-strong, #c9d4cc);
}

/* ---------------------------------------------------- Loading / states */

.pdt-skeleton__label {
    width: 45%;
    height: 0.6rem;
    margin-bottom: 0.45rem;
    border-radius: 0.2rem;
}

.pdt-skeleton__value {
    width: 80%;
    height: 1.2rem;
}

.pdt-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pdt-state {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: var(--arv-radius, 0.5rem);
}

.pdt-state--empty {
    background-color: var(--arv-surface-alt, #f7f9f7);
    border: 1px dashed var(--arv-line-strong, #c9d4cc);
    color: var(--arv-label, #6b7a70);
}

.pdt-state--error {
    background-color: #fdf0ef;
    border: 1px solid #f3ccc9;
    color: #842029;
}

.pdt-state__icon {
    font-size: 1.25rem;
    line-height: 1.2;
}

.pdt-state__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.pdt-state__text {
    margin: 0.2rem 0 0.75rem;
    font-size: 0.85rem;
}

/* ------------------------------------------------------------ Timeline */

.pdt-timeline {
    margin-bottom: 0;
}

    .pdt-timeline > tbody > tr > td {
        overflow-wrap: break-word;
    }

.pdt-seq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--arv-line-strong, #c9d4cc);
    border-radius: 50%;
    background-color: var(--arv-surface-alt, #f7f9f7);
    font-family: var(--arv-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--arv-ink, #16341f);
}

.pdt-stage {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--arv-ink, #16341f);
}

.pdt-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid;
    border-radius: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.pdt-action--approve {
    background-color: var(--arv-accent-soft, #e8f3ec);
    color: #0f5132;
    border-color: #bcdcc8;
}

.pdt-action--pushback {
    background-color: #fdf3e2;
    color: #7a5314;
    border-color: #efdcb4;
}

.pdt-action--reject {
    background-color: #fdf0ef;
    color: #842029;
    border-color: #f3ccc9;
}

.pdt-action--other {
    background-color: #eef1ef;
    color: #4d5b53;
    border-color: var(--arv-line-strong, #c9d4cc);
}

.pdt-final {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border: 1px solid;
    border-radius: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.pdt-final--yes {
    background-color: var(--arv-accent, #198754);
    color: #ffffff;
    border-color: var(--arv-accent, #198754);
}

.pdt-final--no {
    background-color: #eef1ef;
    color: #4d5b53;
    border-color: var(--arv-line-strong, #c9d4cc);
}

.pdt-final--yes-rejected {
    background-color: #b02a37;
    color: #ffffff;
    border-color: #b02a37;
}

.pdt-datetime {
    font-family: var(--arv-mono);
    font-size: 0.8rem;
    white-space: nowrap;
}

.pdt-person--id {
    font-family: var(--arv-mono);
    font-size: 0.74rem;
    color: var(--arv-label, #6b7a70);
    word-break: break-all;
}

.pdt-person--none,
.pdt-no-comment {
    font-style: italic;
    color: var(--arv-label, #6b7a70);
}

.pdt-comment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--arv-line-strong, #c9d4cc);
    border-radius: 0.3rem;
    background-color: var(--arv-surface, #ffffff);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--arv-ink, #16341f);
    cursor: pointer;
}

    .pdt-comment-toggle:hover {
        background-color: var(--arv-accent-soft, #e8f3ec);
    }

    .pdt-comment-toggle:focus-visible {
        outline: 2px solid var(--arv-accent, #198754);
        outline-offset: 2px;
    }

    .pdt-comment-toggle[aria-expanded="true"] {
        background-color: var(--arv-accent-soft, #e8f3ec);
        border-color: var(--arv-accent, #198754);
    }

.pdt-comment-toggle__chevron {
    font-size: 0.65rem;
    transition: transform 0.15s ease;
}

.pdt-comment-toggle[aria-expanded="true"] .pdt-comment-toggle__chevron {
    transform: rotate(180deg);
}

.pdt-timeline__row--open > td {
    background-color: #fbfcfb;
    border-bottom-width: 0;
}

.pdt-timeline__comment > td {
    padding: 0 0.75rem 0.9rem 3.4rem;
    background-color: #fbfcfb;
}

/* ----------------------------------------------- Tablets and phones */

/* Eight columns no longer fit below the lg breakpoint, so every timeline row
   becomes its own card. Each cell's label comes from its data-label
   attribute, the same way the document tables work on phones. */
@media (max-width: 991.98px) {
    .pdt-timeline > thead {
        display: none;
    }

    .pdt-timeline,
    .pdt-timeline > tbody,
    .pdt-timeline > tbody > tr,
    .pdt-timeline > tbody > tr > td {
        display: block;
        width: 100%;
    }

        .pdt-timeline > tbody > tr {
            margin-bottom: 0.75rem;
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--arv-line, #dfe5e0);
            border-radius: 0.4rem;
            background-color: var(--arv-surface, #ffffff);
        }

            .pdt-timeline > tbody > tr:last-child {
                margin-bottom: 0;
            }

            .pdt-timeline > tbody > tr > td {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
                padding: 0.35rem 0;
                border-bottom-width: 0;
                text-align: right;
            }

                .pdt-timeline > tbody > tr > td::before {
                    content: attr(data-label);
                    flex: 0 0 auto;
                    font-size: 0.68rem;
                    font-weight: 600;
                    letter-spacing: 0.04em;
                    text-transform: uppercase;
                    color: var(--arv-label, #6b7a70);
                    text-align: left;
                }

            /* An open row and its comment join into one card. */
            .pdt-timeline > tbody > tr.pdt-timeline__row--open {
                margin-bottom: 0;
                border-bottom: 0;
                border-radius: 0.4rem 0.4rem 0 0;
            }

            .pdt-timeline > tbody > tr.pdt-timeline__comment {
                padding-top: 0.6rem;
                border-top: 1px dashed var(--arv-line, #dfe5e0);
                border-radius: 0 0 0.4rem 0.4rem;
                background-color: #fbfcfb;
            }

                .pdt-timeline > tbody > tr.pdt-timeline__comment > td {
                    display: block;
                    padding: 0 0 0.25rem;
                    text-align: left;
                }

                    .pdt-timeline > tbody > tr.pdt-timeline__comment > td::before {
                        content: none;
                    }

    .pdt-timeline__row--open > td {
        background-color: transparent;
    }
}

@media (max-width: 575.98px) {
    .pdt-summary__header .pdt-open-btn {
        width: 100%;
        justify-content: center;
    }

    .pdt-value {
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdt-comment-toggle__chevron {
        transition: none;
    }
}