/* jurissuite-stages.css — workflow stages chrome.
 * Designed to drop in above whatever the host page already has. The
 * strip is full-width, dark, and sticks to the top of the document
 * (not viewport — we want it to scroll away if you scroll the page,
 * but stay anchored at the top of the layout flow).
 */

#jurissuite-stages.js-stages {
    /* Layout */
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 16px;
    width: 100%;
    box-sizing: border-box;

    /* Stacking: above any host chrome so dropdowns from the strip
     * (none today, but future-proof) don't get clipped. */
    position: relative;
    z-index: 9999;

    /* Theme: dark band with a subtle gradient, hairline divider
     * below. Mirrors the JD/JT-Web dark accent so it doesn't fight
     * existing chrome. */
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-bottom: 1px solid #334155;
    color: #e2e8f0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.2;
    user-select: none;
}

.js-stages-brand {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #cbd5e1;
    padding-right: 8px;
    border-right: 1px solid #334155;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}
.js-stages-brand:hover {
    color: #fff;
}

.js-stages-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* ── Stage chips ──────────────────────────────────────────────── */

.js-stage {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #e2e8f0;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.js-stage:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.20);
}

/* Current stage — brand blue. */
.js-stage-current {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #3b82f6;
    color: #fff;
    cursor: default;
    box-shadow: 0 1px 4px rgba(37,99,235,0.5);
}
.js-stage-current:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #3b82f6;
}

/* Locked (not entitled) — dimmed, lock icon takes over. */
.js-stage-locked {
    opacity: 0.45;
    cursor: not-allowed;
}
.js-stage-locked:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

/* Passive (clickable but doesn't navigate — e.g. JurisTrial). */
.js-stage-passive {
    cursor: help;
}

.js-stage-icon {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

/* Per-door count badge - lives next to the labels on each chip
 * once /api/v1/cases/:case_id/door-counts has populated it. */
.js-stage-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    margin-left: 8px;
    border-radius: 9px;
    background: rgba(255,255,255,0.16);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}
.js-stage-current .js-stage-badge {
    background: rgba(255,255,255,0.28);
}
.js-stage-locked .js-stage-badge {
    display: none;
}

.js-stage-labels {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.js-stage-name {
    font-weight: 600;
    font-size: 13px;
}
.js-stage-current .js-stage-name {
    color: #fff;
}

.js-stage-sub {
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.js-stage-current .js-stage-sub {
    color: rgba(255,255,255,0.85);
}

/* Arrow between chips. */
.js-stages-arrow {
    color: #475569;
    font-size: 14px;
    margin: 0 2px;
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .js-stage-sub { display: none; }
    .js-stage { padding: 6px 10px; gap: 6px; }
    .js-stages-arrow { font-size: 12px; }
}

@media (max-width: 600px) {
    /* Tight mode: hide names, show icons only */
    .js-stage-name { display: none; }
    .js-stages-brand { font-size: 12px; }
}

/* Hook for host pages to adjust their own layout when the strip is
 * active. Normal-flow content naturally pushes down, BUT position:fixed
 * elements are positioned relative to the viewport — they ignore the
 * strip's height and end up visually clipped by the strip overlay (which
 * has z-index 9999, higher than typical viewer chrome at z-index 2000).
 *
 * The --js-stages-height variable is set by the JS at render time from
 * the strip's measured offsetHeight, so this stays correct if chip
 * padding / labels / responsive breakpoints change the actual height.
 * 50px is the fallback for pages where JS hasn't run yet. */
body.js-stages-active {
    --js-stages-height: 50px;
}

/* JD shell viewer panel (also used by JR via embed=jurisreview). */
body.js-stages-active #rightSidebar {
    top: var(--js-stages-height, 50px);
    height: calc(100vh - var(--js-stages-height, 50px));
}

/* JD admin "view-as" banner — fixed at viewport top. */
body.js-stages-active #viewAsBanner {
    top: var(--js-stages-height, 50px);
}

/* JD main shell: .jd-container is `height: 100vh`, which would push its
 * bottom past the viewport because the stages strip occupies the top N px.
 * Shrink to the remaining viewport. */
body.js-stages-active .jd-container {
    height: calc(100vh - var(--js-stages-height, 50px));
}