/* ============================================================================
   "מה קורה הלאה" במסך "ההוצאה נוספה": ציר אנכי של השלבים הבאים של ההוצאה
   (expenseNextStepsHtml, expense-success-view.js). השלבים עצמם נגזרים
   מהסטטוסים האמיתיים ב-lib/expense-success-model.js.

   **מצב השלב נאמר גם בטקסט**: "הצעד הבא" כתוב, וצירוף חשבונית חסר אומר את
   זה בכותרת שלו. הצבע מחזק, ואינו הסימן היחיד (DESIGN.md, איסור 5).

   לא שייך לכאן: שאר המסך (expense-success.css).
   ============================================================================ */

.exp-next {
    max-width: 440px;
    margin: 0 auto 18px;
    text-align: start;
}

.exp-next-head {
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
}

.exp-next-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* הקו האנכי בין הנקודות עובר מתחת לכל שלב חוץ מהאחרון. */
.exp-next-step {
    position: relative;
    display: flex;
    gap: 10px;
    padding-bottom: 12px;
}

.exp-next-step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: 8px;
    top: 20px;
    bottom: 2px;
    width: 2px;
    background: #e2e8f0;
}

.exp-next-dot {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.exp-next-step--done .exp-next-dot {
    background: #047857;
    border-color: #047857;
    color: #fff;
}

.exp-next-step--warn .exp-next-dot {
    border-color: #d97706;
    background: #fffbeb;
}

.exp-next-step--next .exp-next-dot {
    border-color: #2f4f7f;
}

.exp-next-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.exp-next-step--todo .exp-next-title {
    color: #475569;
    font-weight: 500;
}

.exp-next-step--warn .exp-next-title {
    color: #92400e;
}

.exp-next-sub {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 1px;
}

.exp-next-now {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef2f7;
    color: #2f4f7f;
    font-size: 10.5px;
    font-weight: 700;
    vertical-align: 1px;
}