/* =============================================================================
 *  pipeline.css — نوار وضعیت چهار مرحله‌ای  (طرح UX، ایده ۱)
 * -----------------------------------------------------------------------------
 *  عمداً در styles.css ادغام نشده تا بتوان مستقل نسخه‌اش را شکست و در صورت
 *  نیاز از یک صفحه برداشتش.
 *
 *  از توکن‌های موجود styles.css استفاده می‌کند و هیچ رنگ تازه‌ای وارد نمی‌کند:
 *      --card --card-2 --line --gold --ok --err --muted --text --radius
 *
 *  ⚠ هر چراغ دو نشانه‌ی مستقل دارد: رنگ *و* شکل (آیکون). تکیه بر رنگ
 *  به‌تنهایی برای کاربر کوررنگ کار نمی‌کند و این اطلاعات حیاتی است.
 *
 *  ⚠ حرکت حداقلی است: این نوار را باید خواند، نه تماشا کرد. حلقه‌ی دور
 *  مرحله‌ی جاری ثابت است، نه پالس‌دار.
 * ========================================================================== */

.bz-pipe {
    max-width: 1100px;
    margin: 14px auto 0;
    padding: 0 16px;              /* حاشیه‌ی ۱۶ پیکسلی موبایل */
}

.bz-pipe-head {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 16px;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    text-align: right;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

/* حالت مهمان قابل کلیک نیست — چیزی برای باز کردن وجود ندارد */
.bz-pipe-static { cursor: default; }

.bz-pipe-head:not(.bz-pipe-static):hover { border-color: var(--gold); }
.bz-pipe-head:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 *  ردیف مرحله‌ها
 *  خط پیشرفت با ::before کشیده می‌شود. در RTL باید از سمت *راست* شروع شود —
 *  شایع‌ترین باگ نوارهای پیشرفت در سایت‌های فارسی. اینجا با flex و
 *  direction ارثی خودکار درست است، چون خط داخل خودِ آیتم کشیده می‌شود.
 * ------------------------------------------------------------------------ */
.bz-pipe-steps {
    display: flex;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
}

.bz-pipe-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

/* خط اتصال به مرحله‌ی قبلی (سمت راست در RTL) */
.bz-pipe-step::before {
    content: "";
    position: absolute;
    top: 13px;
    right: 50%;
    left: 50%;
    height: 2px;
    background: var(--line);
    transform: translateX(50%);
    width: 100%;
    z-index: 0;
}
.bz-pipe-step:first-child::before { display: none; }

/* خطِ طی‌شده پررنگ می‌شود */
.bz-pipe-step.st-done::before,
.bz-pipe-step.st-rejected::before { background: var(--ok); }

.bz-pipe-dot {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--card-2);
    border: 2px solid var(--line);
    color: var(--muted);
    flex: none;
}

.bz-pipe-label {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ---- حالت‌ها: رنگ + شکل ---- */
.st-done    .bz-pipe-dot { background: var(--ok);   border-color: var(--ok);   color: #06301a; }
.st-done    .bz-pipe-label { color: var(--text); }

.st-current .bz-pipe-dot {
    background: var(--gold);
    border-color: var(--gold);
    color: #2a1c00;
    font-size: 8px;
    /* حلقه‌ی ثابت — نه پالس. کاربر باید بخواندش، نه اینکه حواسش پرت شود. */
    box-shadow: 0 0 0 4px rgba(255, 178, 0, .18);
}
.st-current .bz-pipe-label { color: var(--gold); font-weight: 700; }

.st-locked  .bz-pipe-dot { color: var(--muted); }

.st-rejected .bz-pipe-dot { background: var(--err); border-color: var(--err); color: #fff; }
.st-rejected .bz-pipe-label { color: var(--err); font-weight: 700; }

.st-idle .bz-pipe-dot {
    background: transparent;
    border-style: dashed;
    border-color: var(--line);
}
.st-idle.is-start .bz-pipe-dot { border-color: var(--gold); }
.st-idle.is-start .bz-pipe-label { color: var(--gold-soft); }

/* ---- بخش «الان کجایید» ---- */
.bz-pipe-now {
    display: none;                /* فقط موبایل */
    flex-direction: column;
    gap: 2px;
    flex: none;
    text-align: right;
}
.bz-pipe-now b   { font-size: 13px; color: var(--muted); font-weight: 600; }
.bz-pipe-now > span { font-size: 15px; color: var(--text); font-weight: 700; }

.bz-pipe-caret {
    display: none;
    flex: none;
    color: var(--muted);
    font-size: 13px;
    transition: transform .2s ease;
}
.bz-pipe-head[aria-expanded="true"] .bz-pipe-caret { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------
 *  فهرست بازشونده
 *  بدون انیمیشن ارتفاع: max-height گران و جهنده است. یک fade + جابه‌جایی
 *  کوچک کافی است و زیر prefers-reduced-motion کاملاً حذف می‌شود.
 * ------------------------------------------------------------------------ */
.bz-pipe-list {
    background: var(--card-2);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    margin: -1px 0 0;
    padding: 6px 16px 10px;
    animation: bzPipeIn .2s ease both;
}
.bz-pipe-list[hidden] { display: none; }

@keyframes bzPipeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bz-pipe-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.bz-pipe-row:last-child { border-bottom: none; }
.bz-pipe-row .bz-pipe-dot { width: 22px; height: 22px; font-size: 10px; }
.bz-pipe-row.st-current .bz-pipe-dot { font-size: 7px; }

.bz-pipe-rowlabel { flex: 1 1 auto; font-size: 14px; }
.bz-pipe-rowdate  { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.bz-pipe-row.st-done .bz-pipe-rowlabel     { color: var(--text); }
.bz-pipe-row.st-current .bz-pipe-rowlabel  { color: var(--gold); font-weight: 700; }
.bz-pipe-row.st-rejected .bz-pipe-rowlabel { color: var(--err); font-weight: 700; }
.bz-pipe-row.st-locked .bz-pipe-rowlabel   { color: var(--muted); }

/* ---------------------------------------------------------------------------
 *  نوار اقدام برای درخواست رد شده
 *  ⚠ نوار است، نه مودال و نه alert: کاربر باید بتواند هم‌زمان نوار وضعیت را
 *  ببیند و تصمیم بگیرد.
 * ------------------------------------------------------------------------ */
.bz-pipe-alert {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 16px;
    background: rgba(231, 76, 60, .08);
    border: 1px solid rgba(231, 76, 60, .35);
    border-radius: var(--radius);
}
.bz-pipe-alert-head { font-weight: 700; color: #ff8d80; font-size: 14.5px; }
.bz-pipe-alert-head i { margin-left: 6px; }
.bz-pipe-reason { font-size: 14px; color: var(--text); line-height: 1.8; }

.bz-pipe-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }

.bz-pipe-fix,
.bz-pipe-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* ⚠ حداقل ۴۴ پیکسل ارتفاع لمسی */
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-weight: 700;
}
.bz-pipe-fix {
    /* متن تیره روی طلایی — سفید روی طلایی نسبت ۱٫۹:۱ می‌دهد که مردود است */
    background: linear-gradient(180deg, #ffc02e, var(--gold));
    color: #2a1c00;
}
.bz-pipe-more {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
}
.bz-pipe-more:hover { border-color: var(--gold); color: var(--gold); }

/* =============================================================================
 *  موبایل — نوار شکل عوض می‌کند، نه اینکه کوچک شود
 * -----------------------------------------------------------------------------
 *  چهار برچسب فارسی در عرض ۳۲۰ پیکسل جا نمی‌شوند. پس روی موبایل فقط چهار
 *  نقطه‌ی کوچک می‌مانند و *یک* برچسبِ خوانا کنارشان: مرحله‌ی جاری.
 *  کاربر موبایل در هر لحظه فقط یک چیز را می‌خواهد بداند: «الان کجام».
 *  تاریخچه‌ی کامل با یک ضربه باز می‌شود.
 * ========================================================================== */
@media (max-width: 767px) {
    .bz-pipe { padding: 0 16px; }

    .bz-pipe-head {
        gap: 10px;
        padding: 10px 14px;
        min-height: 56px;
    }

    .bz-pipe-steps { flex: none; gap: 0; }

    .bz-pipe-step { flex: none; width: 22px; }

    .bz-pipe-step::before { top: 5px; height: 2px; }

    .bz-pipe-dot { width: 12px; height: 12px; border-width: 2px; }
    .bz-pipe-dot i { display: none; }        /* در ۱۲ پیکسل آیکون خوانا نیست */

    .bz-pipe-label { display: none; }        /* برچسب‌ها جای خود را به bz-pipe-now می‌دهند */

    .bz-pipe-now   { display: flex; flex: 1 1 auto; min-width: 0; }
    .bz-pipe-now > span {
        font-size: 15px;                      /* زیر ۱۵ نرو — این متن باید خوانده شود */
        line-height: 1.45;
        /* ⚠ بریدن با ... اینجا ممنوع است: جمله‌ی «مدارک ناقص — نیاز به اصلاح»
           دقیقاً از همان جایی بریده می‌شد که باید خوانده شود. تا دو خط
           می‌پیچد و فقط بعد از آن بریده می‌شود. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .bz-pipe-caret { display: block; }

    .is-guest .bz-pipe-head { min-height: 48px; }
    .is-guest .bz-pipe-now b {
        font-size: 13px;
        line-height: 1.5;
        color: var(--gold-soft);
        white-space: normal;
    }
}

@media (min-width: 768px) {
    /* دسکتاپ: نوار افقی کامل، بدون بخش «الان کجایید» */
    .bz-pipe-head { min-height: 72px; }
    .bz-pipe-now  { display: none; }
    .is-guest .bz-pipe-now {
        display: flex;
        flex: none;
        padding-right: 12px;
        border-right: 1px solid var(--line);
    }
    .is-guest .bz-pipe-now b { color: var(--gold-soft); font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .bz-pipe-list { animation: none; }
    .bz-pipe-head, .bz-pipe-caret { transition: none; }
}