/* Program lifecycle swimlane flowchart (Features/Programs/Pages/ProgramLifecyclePage.razor).
   Plain CSS with an lc- prefix: the app links no scoped-CSS bundle, so .razor.css never loads. */

.lc-page {
    --lc-surface: var(--rz-base-background-color, #fff);
    --lc-text: var(--rz-text-color, #1f2933);
    --lc-muted: var(--rz-text-secondary-color, #6b7280);
    --lc-border: var(--rz-base-300, #d7dce3);
    --lc-ink: #334155;
    --lc-flow: #c2410c;
    --lc-flow-strong: #9a3412;
    --lc-flow-ring: rgba(194, 65, 12, 0.28);
    --lc-home: #1d4ed8;
    --lc-home-ring: rgba(29, 78, 216, 0.25);
    --lc-danger: #c62828;
    --lc-done: #2e7d32;
    --lc-retreat: #6d28d9;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--lc-text);
}

/* Dark theme: RadzenAppearanceToggle only swaps the href of #radzen-theme-link (no class on <html>),
   so key off that link. The accents above sit on a near-black surface there; lift them. */
html:has(#radzen-theme-link[href*="-dark"]) .lc-page {
    --lc-ink: #cbd5e1;
    --lc-flow: #fb923c;
    --lc-flow-strong: #fdba74;
    --lc-flow-ring: rgba(251, 146, 60, 0.35);
    --lc-home: #7aa7ff;
    --lc-home-ring: rgba(122, 167, 255, 0.35);
    --lc-danger: #f87171;
    --lc-done: #4ade80;
    --lc-retreat: #c4b5fd;
    --lc-pill-on-flow: #1b1d20;
}

.lc-muted {
    color: var(--lc-muted);
    font-size: 0.75rem;
}

.lc-italic {
    font-style: italic;
}

.lc-table .lc-col-action {
    width: 2.25rem;
    padding-right: 0;
    text-align: center;
}

.lc-row-btn {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lc-row-btn:focus-visible {
    outline: 2px solid var(--lc-home);
    outline-offset: 2px;
}

.lc-nowrap {
    white-space: nowrap;
}


.lc-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--lc-flow);
    border-left-width: 5px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--lc-flow) 8%, var(--lc-surface));
    font-size: 0.85rem;
}

.lc-banner-home {
    border-color: var(--lc-home);
    background: color-mix(in srgb, var(--lc-home) 7%, var(--lc-surface));
}

.lc-banner-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--lc-flow-strong);
}

.lc-banner-home .lc-banner-label {
    color: var(--lc-home);
}

.lc-banner .lc-banner-action {
    margin-left: auto;
}

.lc-stops {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.lc-arrow {
    color: var(--lc-muted);
}

.lc-stop {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--lc-home);
    border-radius: 4px;
    background: var(--lc-surface);
    font-size: 0.78rem;
    font-weight: 600;
}

.lc-stop-dropped {
    border-style: dashed;
    border-color: var(--lc-danger);
    color: var(--lc-danger);
}

.lc-stop-retreated {
    border-color: var(--lc-retreat);
    color: var(--lc-retreat);
}

.lc-stop-mark {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.85;
}

.lc-note {
    padding: 0.5rem 0.85rem;
    border: 1px dashed var(--lc-border);
    border-radius: 6px;
    font-size: 0.82rem;
}

.lc-note-warn {
    border-style: solid;
    border-color: #d97706;
    background: color-mix(in srgb, #d97706 8%, var(--lc-surface));
}


.lc-body {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}


.lc-board {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lc-border);
    border-radius: 10px;
    /* Scroll rather than clip: a narrow board (drawer open, small screen) must still reach every card.
       The lines and pills are absolute children, so they scroll with the content. */
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--lc-surface);
}

/* Lanes have no z-index, so their tint paints under the lines and the cards paint over them. */
.lc-lane {
    display: flex;
    min-height: 9rem;
    border-top: 1px solid var(--lc-border);
    background: color-mix(in srgb, var(--lane) 11%, var(--lc-surface));
}

.lc-lane:first-of-type {
    border-top: 0;
}

.lc-lane-label {
    flex: 0 0 2.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0;
    background: var(--lane);
    color: #fff;
}

.lc-lane-name,
.lc-lane-count {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

.lc-lane-name {
    margin: 0;
    color: inherit;
    line-height: 1.2;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lc-lane-count {
    font-size: 0.65rem;
}

.lc-lane-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 2.4rem 1.25rem;
}

.lc-lane-cards {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1.1rem 1.5rem;
}

.lc-lane-exits {
    flex: 0 0 auto;
    display: flex;
    gap: 0.6rem;
    padding-left: 1.25rem;
    border-left: 2px dashed color-mix(in srgb, var(--lane) 45%, transparent);
}


.lc-lines {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

.lc-line {
    fill: none;
    stroke: var(--lc-flow);
    stroke-width: 2;
    stroke-linecap: round;
}

.lc-line-focus {
    stroke: var(--lc-flow-strong);
    stroke-width: 4;
}

.lc-line-home {
    stroke: var(--lc-home);
    stroke-width: 3;
}

.lc-arrowhead {
    fill: var(--lc-flow);
}

.lc-arrowhead-home {
    fill: var(--lc-home);
}

.lc-pill {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, -50%);
    padding: 0.15rem 0.65rem;
    border: 1.5px solid var(--lc-flow);
    border-radius: 999px;
    background: var(--lc-surface);
    color: var(--lc-flow-strong);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.lc-pill:hover,
.lc-pill-focus {
    background: var(--lc-flow);
    color: var(--lc-pill-on-flow, #fff);
    box-shadow: 0 0 0 3px var(--lc-flow-ring);
}


.lc-card {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 12.5rem;
    padding: 0.55rem 0.7rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--lane) 55%, var(--lc-border));
    border-top: 4px solid var(--lane);
    border-radius: 6px;
    background: var(--lc-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: opacity 120ms ease, box-shadow 120ms ease;
}

.lc-card[aria-disabled="true"],
.lc-card[aria-disabled="true"]:hover {
    cursor: default;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.lc-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.lc-card-name {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
}

.lc-card-grant {
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--lc-muted);
    word-break: break-word;
}

.lc-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    margin-top: auto;
    padding-top: 0.2rem;
}

.lc-card-count {
    font-size: 0.75rem;
    color: var(--lc-muted);
}

.lc-card-count strong {
    font-size: 0.95rem;
    color: var(--lc-text);
}

.lc-badge {
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--lc-retreat);
    border-radius: 999px;
    color: var(--lc-retreat);
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}

.lc-mode-flow .lc-dim,
.lc-mode-home .lc-dim {
    opacity: 0.6;
}

/* Dimmed cards are still buttons; full opacity on hover and keyboard focus keeps the ring and text readable. */
.lc-mode-flow .lc-dim:hover,
.lc-mode-home .lc-dim:hover,
.lc-mode-flow .lc-dim:focus-visible,
.lc-mode-home .lc-dim:focus-visible {
    opacity: 1;
}

.lc-source {
    background: var(--lane);
    border-color: var(--lane);
    color: #fff;
    box-shadow: 0 0 0 4px var(--lc-flow-ring);
}

.lc-source .lc-card-grant,
.lc-source .lc-card-count,
.lc-source .lc-card-count strong {
    color: #fff;
}

.lc-source .lc-badge {
    border-color: #fff;
    color: #fff;
}

.lc-lit {
    border: 2px solid var(--lc-flow);
    border-top: 4px solid var(--lane);
    box-shadow: 0 0 0 3px var(--lc-flow-ring);
}

.lc-home {
    border: 2px solid var(--lc-home);
    border-top: 4px solid var(--lane);
    box-shadow: 0 0 0 3px var(--lc-home-ring);
}

.lc-home-dropped {
    border-style: dashed;
    border-color: var(--lc-danger);
}

.lc-more {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    width: 8rem;
    padding: 0.5rem;
    border: 1.5px dashed color-mix(in srgb, var(--lane) 60%, var(--lc-border));
    border-radius: 6px;
    background: color-mix(in srgb, var(--lc-surface) 70%, transparent);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.lc-more-count {
    font-size: 0.88rem;
    font-weight: 700;
}

.lc-empty-lane {
    padding: 0.75rem 1rem;
    border: 1px dashed var(--lc-border);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--lc-muted);
}

/* ---------- Lane exits (dropped / completed) ---------- */

.lc-exit {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 6.5rem;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    background: var(--lc-surface);
    font: inherit;
    cursor: pointer;
}

.lc-exit-drop {
    color: var(--lc-danger);
}

.lc-exit-done {
    color: var(--lc-done);
}

.lc-exit:hover:not(:disabled),
.lc-exit.lc-active {
    background: color-mix(in srgb, currentColor 10%, var(--lc-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}

.lc-exit-empty {
    color: var(--lc-muted);
    opacity: 0.6;
    cursor: default;
}

.lc-exit-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.lc-exit-count {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.lc-exit-sub {
    font-size: 0.65rem;
    color: var(--lc-muted);
}


.lc-card:focus-visible,
.lc-pill:focus-visible,
.lc-exit:focus-visible,
.lc-more:focus-visible {
    outline: 2px solid var(--lc-home);
    outline-offset: 2px;
}


.lc-drawer {
    flex: 0 0 23rem;
    position: sticky;
    top: 0.5rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 6rem);
    border: 1px solid var(--lc-border);
    border-radius: 10px;
    background: var(--lc-surface);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.lc-drawer-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.6rem 0.5rem 1rem;
}

.lc-drawer-title {
    flex: 1 1 auto;
    min-width: 0;
}

.lc-drawer-name {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
}

.lc-drawer-search {
    padding: 0 1rem 0.6rem;
    border-bottom: 1px solid var(--lc-border);
}

.lc-drawer-list {
    flex: 1 1 auto;
    overflow-y: auto;
}

.lc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.lc-table th {
    position: sticky;
    top: 0;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--lc-border);
    background: var(--lc-surface);
    color: var(--lc-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: left;
}

.lc-table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--lc-border);
    vertical-align: top;
}

.lc-table tbody tr {
    cursor: pointer;
}

.lc-table tbody tr:hover {
    background: color-mix(in srgb, var(--lc-home) 6%, var(--lc-surface));
}

.lc-table tbody tr.lc-row-active {
    background: color-mix(in srgb, var(--lc-home) 12%, var(--lc-surface));
    box-shadow: inset 4px 0 0 var(--lc-home);
}

.lc-drawer-foot {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--lc-border);
}

@media (max-width: 1200px) {
    .lc-body {
        flex-direction: column;
        align-items: stretch;
    }

    .lc-drawer {
        position: static;
        flex-basis: auto;
        max-height: 30rem;
    }
}