/**
 * Client Journey page — Core issues + Timeline
 * (CSS class prefix remains ccc-progress-* for now; user-facing name is Client Journey)
 */

/* START CLIENT PROGRESS LAYOUT */

.ccc-progress-container {
    /* Match Notes / Client Roster gap under site header (theme collapses first-child margin) */
    padding: 20px 0 0;
    margin-bottom: 24px;
    color: var(--ccc-text-color, #333333);
}

.ccc-progress-container .notes-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.ccc-progress-container .notes-header-section h3 {
    margin: 0;
}

.ccc-progress-container .header-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ccc-progress-quiet-link {
    font-size: 0.875rem;
    color: var(--ccc-text-light, #666666);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ccc-progress-quiet-link:hover {
    color: var(--ccc-text-color, #333333);
}

.ccc-progress-empty {
    padding: 20px;
    text-align: center;
    color: var(--ccc-text-light, #666666);
}

.ccc-progress-muted {
    color: var(--ccc-text-light, #666666);
    font-size: 0.9rem;
    margin: 6px 0 0;
}

/* END CLIENT PROGRESS LAYOUT */

/* View switch lives in CCC Core filters — no duplicate tab bar */

/* START CORE ISSUE CARDS */

.ccc-progress-issue-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 8px 0 20px;
}

.ccc-progress-issue-card {
    padding: 0;
    overflow: hidden;
}

.ccc-progress-issue-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    cursor: pointer;
    list-style: none;
}

.ccc-progress-issue-summary::-webkit-details-marker {
    display: none;
}

.ccc-progress-issue-summary::marker {
    content: "";
}

.ccc-progress-issue-summary-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    column-gap: 8px;
}

.ccc-progress-issue-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--ccc-text-color, #333333);
}

/* Wide-base black triangle expand (CSS triangle — base at top when closed) */
.ccc-progress-expand-toggle {
    flex-shrink: 0;
    width: 0;
    height: 0;
    /* ~10% narrower than prior 8px sides */
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid #222222;
    margin-top: 6px;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
    user-select: none;
}

.ccc-progress-issue-card[open] .ccc-progress-expand-toggle {
    transform: rotate(180deg);
}

.ccc-progress-sparkline-wrap {
    color: var(--ccc-primary-color, #e35c5c);
    display: inline-flex;
    align-items: center;
}

.ccc-progress-sparkline {
    display: block;
}

.ccc-progress-issue-summary-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.ccc-progress-metric-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px; /* space between label and number */
    font-size: 0.85rem;
    color: var(--ccc-text-color, #333333);
    background: #f7f7f7;
    border: 1px solid var(--ccc-border-color, #e0e0e0);
    border-radius: 4px;
    padding: 4px 8px;
}

.ccc-progress-metric-pill em {
    font-style: normal;
    font-size: 0.75rem;
    color: var(--ccc-text-light, #666666);
    margin-left: 4px;
}

.ccc-progress-metric-label {
    font-weight: 400;
}

.ccc-progress-metric-value {
    font-weight: 700;
}

/* Booking-adjacent trend pills — chill colors (not loud Core badges) */
.ccc-progress-trend-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.ccc-progress-trend-arrow {
    font-size: 0.8rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
}

/* Stable: CSS circle sized to match ▲ / ▼ (character ● was optically tiny) */
.ccc-progress-trend-arrow--dot {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: currentColor;
    font-size: 0;
    line-height: 0;
}

/* Soft amber for stable — sits between green (good) and red (bad) without using CCC primary red or blue */
.ccc-progress-trend-pill--summary.ccc-progress-trend--stable,
.ccc-progress-trend-pill--expanded.ccc-progress-trend--stable {
    background: #fbf3e8;
    color: #8a6a3d;
    border-color: #ead9c0;
}

.ccc-progress-trend-pill--summary.ccc-progress-trend--improving .ccc-progress-trend-arrow,
.ccc-progress-trend-pill--summary.ccc-progress-trend--worsening .ccc-progress-trend-arrow,
.ccc-progress-trend-pill--summary.ccc-progress-trend--stable .ccc-progress-trend-arrow {
    color: inherit;
}

/* Collapsed card: same shell as metrics, with soft trend tint so it doesn’t blend */
.ccc-progress-trend-pill--summary {
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 4px;
    padding: 4px 8px;
    border: 1px solid var(--ccc-border-color, #e0e0e0);
}

.ccc-progress-trend-pill--summary .ccc-progress-trend-text {
    margin-left: 0;
}

.ccc-progress-trend-pill--summary.ccc-progress-trend--improving {
    background: #f1f6f2;
    color: #4a6b55;
    border-color: #d7e4db;
}

.ccc-progress-trend-pill--summary.ccc-progress-trend--worsening {
    background: #f8f1f1;
    color: #8a5555;
    border-color: #eadede;
}

.ccc-progress-trend-pill--summary.ccc-progress-trend--stable {
    background: #fbf3e8;
    color: #8a6a3d;
    border-color: #ead9c0;
}

.ccc-progress-trend-pill--summary.ccc-progress-trend--improving .ccc-progress-trend-arrow,
.ccc-progress-trend-pill--summary.ccc-progress-trend--worsening .ccc-progress-trend-arrow,
.ccc-progress-trend-pill--summary.ccc-progress-trend--stable .ccc-progress-trend-arrow {
    color: inherit;
}

.ccc-progress-trend-pill--expanded {
    border-radius: 4px;
    padding: 3px 8px;
    border: 1px solid transparent;
}

.ccc-progress-trend-pill--expanded .ccc-progress-trend-text {
    margin-left: 0;
}

.ccc-progress-trend-pill--expanded.ccc-progress-trend--improving {
    background: #f1f6f2;
    color: #4a6b55;
    border-color: #d7e4db;
}

.ccc-progress-trend-pill--expanded.ccc-progress-trend--worsening {
    background: #f8f1f1;
    color: #8a5555;
    border-color: #eadede;
}

.ccc-progress-trend-pill--expanded.ccc-progress-trend--stable {
    background: #fbf3e8;
    color: #8a6a3d;
    border-color: #ead9c0;
}

.ccc-progress-counts {
    font-size: 0.85rem;
    color: var(--ccc-text-light, #666666);
}

.ccc-progress-history-note {
    margin: 0 16px 12px;
}

/* Expanded body: charts first, then goals/wins */
.ccc-progress-issue-body {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 1px solid var(--ccc-border-color, #e0e0e0);
}

.ccc-progress-metric-panel {
    padding-top: 14px;
}

.ccc-progress-metric-panel-note {
    margin: 0 0 10px;
}

.ccc-progress-metric-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ccc-progress-metric-chart-block {
    padding: 12px;
    background: #fafafa;
    border: 1px solid var(--ccc-border-color, #e0e0e0);
    border-radius: 6px;
}

.ccc-progress-metric-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.ccc-progress-metric-chart-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ccc-text-color, #333333);
}

.ccc-progress-metric-chart {
    display: block;
    max-width: 100%;
    height: auto;
}

.ccc-progress-chart-area {
    opacity: 0.05;
    transition: opacity 0.2s ease;
}

.ccc-progress-chart-trend {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.ccc-progress-chart-dot {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.15s ease;
}

.ccc-progress-metric-chart-block:hover .ccc-progress-chart-area {
    opacity: 0.18;
}

.ccc-progress-metric-chart-block:hover .ccc-progress-chart-trend {
    opacity: 1;
}

.ccc-progress-metric-chart-block:hover .ccc-progress-chart-dot {
    transform: scale(1.35);
}

.ccc-progress-issue-card--flash {
    box-shadow: 0 0 0 2px var(--ccc-secondary-color, #3498db);
    transition: box-shadow 0.2s ease;
}

/* Tree under expanded issue */
.ccc-progress-tree {
    margin: 0;
    padding: 0;
    border-left: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Nested goal cards — headline left, type badge right */
.ccc-progress-goal-card {
    margin: 0;
    padding: 10px 12px 10px 8px; /* tight left so win checks aren’t floating in whitespace */
    background: #fafafa;
    border: 1px solid var(--ccc-border-color, #e0e0e0);
    border-radius: 6px;
}

.ccc-progress-goal-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 72px;
    align-items: start;
    column-gap: 10px;
}

/* START JOURNEY ROW ACTIONS + GHOSTS (#366 Phase 2) */

.ccc-progress-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ccc-progress-icon-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ccc-text-light, #888888);
    padding: 2px 4px;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    font-size: 0.9rem;
    border-radius: 4px;
}

.ccc-progress-icon-btn:hover,
.ccc-progress-icon-btn:focus-visible {
    color: var(--ccc-primary-color, #e35c5c);
    background: rgba(227, 92, 92, 0.08);
    outline: none;
}

.ccc-progress-ghost-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 8px 0 0;
    padding: 10px 12px;
    border: 1px dashed var(--ccc-border-color, #cfcfcf);
    border-radius: 6px;
    background: transparent;
    color: var(--ccc-text-light, #666666);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    list-style: none;
}

.ccc-progress-ghost-row:hover,
.ccc-progress-ghost-row:focus-visible {
    border-color: var(--ccc-primary-color, #e35c5c);
    color: var(--ccc-text-color, #333333);
    background: rgba(227, 92, 92, 0.04);
    outline: none;
}

.ccc-progress-ghost-plus {
    font-weight: 600;
    color: var(--ccc-primary-color, #e35c5c);
}

/* Add core issue — match Goals/Wins ghost cards (#fafafa + dark text).
   Core customizer ghost vars can be white-on-white on Journey. */
.ccc-progress-issue-ghost.ccc-ghost-card,
.ccc-progress-issue-ghost {
    width: 100%;
    margin-top: 12px;
    margin-bottom: 0;
    min-height: 140px;
    padding: 24px 20px;
    text-align: center;
    background-color: #fafafa !important;
    border: 2px dashed #d3d3d3 !important;
    border-radius: var(--ccc-card-border-radius, 8px);
    color: #333333 !important;
    box-shadow: none !important;
}

.ccc-progress-issue-ghost h3 {
    color: #333333 !important;
    margin: 0 0 8px;
}

.ccc-progress-issue-ghost p {
    color: #666666 !important;
    margin: 0;
}

.ccc-progress-issue-ghost .ccc-ghost-card-icon {
    color: var(--ccc-primary-color, #e35c5c) !important;
    background-color: rgba(227, 92, 92, 0.1) !important;
}

.ccc-progress-issue-ghost:hover,
.ccc-progress-issue-ghost:focus-visible {
    background-color: rgba(227, 92, 92, 0.06) !important;
    border-color: var(--ccc-primary-color, #e35c5c) !important;
    outline: none;
}

.ccc-progress-issue-ghost:hover h3,
.ccc-progress-issue-ghost:hover p,
.ccc-progress-issue-ghost:focus-visible h3,
.ccc-progress-issue-ghost:focus-visible p {
    color: #333333 !important;
}

.ccc-progress-orphan-goal-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 72px;
    align-items: center;
    column-gap: 10px;
    padding: 8px 0;
}

/* END JOURNEY ROW ACTIONS + GHOSTS */

.ccc-progress-goal-title {
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--ccc-text-color, #333333);
}

.ccc-progress-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    box-sizing: border-box;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 4px 12px; /* more horizontal breathing room for Win / Goal / Completed */
    border-radius: 4px;
}

.ccc-progress-type-badge--goal {
    background: #f0f0f0;
    color: #555555;
}

.ccc-progress-type-badge--completed {
    background: #eef6f0;
    color: #3d6b55;
}

.ccc-progress-type-badge--win {
    background: #f8eeee;
    color: #8a5555;
}

.ccc-progress-also-supports {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--ccc-text-color, #333333);
}

.ccc-progress-also-link {
    color: var(--ccc-secondary-color, #3498db);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ccc-progress-also-link:hover {
    color: var(--ccc-primary-color, #e35c5c);
}

.ccc-progress-win-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* check | name | date | actions | Win */
.ccc-progress-win-item {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto auto 72px;
    align-items: center;
    column-gap: 6px;
    font-size: 0.95rem;
    color: var(--ccc-text-light, #666666);
    padding: 0;
    margin: 0;
}

.ccc-progress-win-check {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 14px;
    margin: 0;
    padding: 0;
    color: var(--ccc-primary-color, #e35c5c);
    line-height: 0;
}

.ccc-progress-win-check svg {
    display: block;
    width: 14px;
    height: 14px;
    overflow: visible;
}

.ccc-progress-win-name {
    min-width: 0;
    color: var(--ccc-text-color, #333333);
}

.ccc-progress-win-date {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-right: 10px; /* space between date and Win badge */
    color: var(--ccc-text-light, #666666);
    font-size: 0.8rem;
    white-space: nowrap;
}

.ccc-progress-win-date--empty {
    min-height: 1em;
    margin-right: 10px;
}

.ccc-progress-win-clock {
    flex-shrink: 0;
    color: var(--ccc-text-light, #888888);
}

.ccc-progress-no-wins {
    margin-top: 4px;
}

.ccc-progress-unlinked-wins,
.ccc-progress-unlinked-goals,
.ccc-progress-general-wins {
    padding: 16px;
    margin-top: 16px;
}

.ccc-progress-unlinked-goals h4,
.ccc-progress-unlinked-wins h4,
.ccc-progress-general-wins h4 {
    margin: 0 0 8px;
}

.ccc-progress-orphan-goal-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ccc-progress-orphan-goal-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* END BY-SYMPTOM CARDS */

/* START TIMELINE — center rail; wins left, goals right; meta outside Core cards */

.ccc-progress-timeline {
    position: relative;
    margin: 12px 0 28px;
    padding: 8px 0;
    list-style: none;
}

.ccc-progress-timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ccc-border-color, #e0e0e0);
    transform: translateX(-50%);
    z-index: 0;
}

.ccc-progress-event {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 28px 1fr;
    align-items: start;
    margin: 0 0 28px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: 1;
}

.ccc-progress-event:last-child {
    margin-bottom: 0;
}

.ccc-progress-event-rail {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.ccc-progress-event-marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ccc-primary-color, #e35c5c);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px rgba(227, 92, 92, 0.22);
}

.ccc-progress-event--goal_created .ccc-progress-event-marker {
    background: var(--ccc-secondary-color, #3498db);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.22);
}

.ccc-progress-event--goal_completed .ccc-progress-event-marker {
    background: #5fae78;
    box-shadow: 0 0 0 2px rgba(95, 174, 120, 0.22);
}

.ccc-progress-event-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Wins → left; Goals / Goal completed → right */
.ccc-progress-event--left .ccc-progress-event-side {
    grid-column: 1;
    grid-row: 1;
    padding-right: 18px;
    align-items: flex-end;
}

.ccc-progress-event--right .ccc-progress-event-side {
    grid-column: 3;
    grid-row: 1;
    padding-left: 18px;
    align-items: flex-start;
}

.ccc-progress-event--left::after {
    content: "";
    grid-column: 3;
    grid-row: 1;
}

.ccc-progress-event--right::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
}

/* Meta OUTSIDE the card — type badge + clock/date, tied to the rail */
.ccc-progress-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.ccc-progress-event--left .ccc-progress-event-meta {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

.ccc-progress-event--right .ccc-progress-event-meta {
    justify-content: flex-start;
}

.ccc-progress-event-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px; /* match type-badge breathing room */
    border-radius: 4px; /* match Core metric/type pills, not full pill */
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: #f8eeee;
    color: #8a5555;
    white-space: nowrap;
}

.ccc-progress-event--goal_created .ccc-progress-event-badge {
    background: #eef5fb;
    color: #3d6a8a;
}

.ccc-progress-event--goal_completed .ccc-progress-event-badge {
    background: #eef6f0;
    color: #3d6b55;
}

.ccc-progress-event-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ccc-text-color, #333333);
}

.ccc-progress-event-date--unknown {
    color: var(--ccc-text-light, #888888);
}

.ccc-progress-event-clock {
    flex-shrink: 0;
    color: var(--ccc-text-light, #888888);
}

/* Plain CCC Core card — no accent bars */
.ccc-progress-event-body {
    width: 100%;
    max-width: 100%;
    padding: 14px 16px;
    box-sizing: border-box;
    text-align: left;
}

.ccc-progress-breadcrumb {
    margin: 0 0 6px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--ccc-text-light, #666666);
}

.ccc-progress-event-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ccc-text-color, #333333);
}

.ccc-progress-event-desc {
    margin: 8px 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ccc-text-light, #666666);
}

/* END TIMELINE */

/* START RESPONSIVE */

@media (max-width: 720px) {
    .ccc-progress-metric-charts {
        grid-template-columns: 1fr;
    }

    .ccc-progress-win-item {
        grid-template-columns: 14px minmax(0, 1fr) auto 72px;
        grid-template-rows: auto auto;
        row-gap: 2px;
    }

    .ccc-progress-win-date {
        grid-column: 2 / 3;
        justify-content: flex-start;
        margin-right: 0;
        margin-bottom: 2px;
    }

    .ccc-progress-win-item .ccc-progress-row-actions {
        grid-column: 3;
        grid-row: 1;
    }

    .ccc-progress-win-item .ccc-progress-type-badge--win {
        grid-column: 4;
        grid-row: 1 / span 2;
        align-self: center;
    }

    /* Stack timeline to a single left rail on small screens */
    .ccc-progress-timeline::before {
        left: 13px;
        transform: none;
    }

    .ccc-progress-event {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .ccc-progress-event-rail {
        grid-column: 1;
    }

    .ccc-progress-event--left .ccc-progress-event-side,
    .ccc-progress-event--right .ccc-progress-event-side {
        grid-column: 2;
        padding-left: 12px;
        padding-right: 0;
        align-items: flex-start;
    }

    .ccc-progress-event--left .ccc-progress-event-meta {
        justify-content: flex-start;
        flex-direction: row;
    }

    .ccc-progress-event--left::after,
    .ccc-progress-event--right::before {
        display: none;
    }
}

@media (max-width: 600px) {
    .ccc-progress-issue-summary {
        flex-direction: column;
    }
}

/* END RESPONSIVE */