/* =========================================================
   SYSTEM 4.2.2.2 — VIEW FUNNEL
   ADDITIVE ONLY — 4.2.2.1 PRESERVED
========================================================= */

.funnel-view-modal{
    position:fixed;
    inset:0;
    z-index:10000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(15,23,42,.46);
}
.funnel-view-modal.is-open{display:flex}

.funnel-view-dialog{
    width:min(620px,100%);
    max-height:min(760px,calc(100vh - 40px));
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:14px;
    box-shadow:0 20px 60px rgba(15,23,42,.20);
    overflow:hidden;
}

.funnel-view-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px;
    border-bottom:1px solid #e5e7eb;
    flex:0 0 auto;
}

.funnel-view-title{
    margin:0;
    color:#0f172a;
    font-size:17px;
    font-weight:800;
}

.funnel-view-subtitle{
    margin:5px 0 0;
    color:#64748b;
    font-size:12px;
}

.funnel-view-close{
    width:32px;
    height:32px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#64748b;
    font-size:22px;
    line-height:1;
    cursor:pointer;
}

.funnel-view-close:hover{
    background:#f1f5f9;
}

.funnel-view-body{
    padding:20px;
    overflow:auto;
    flex:1 1 auto;
}

.funnel-view-loading{
    padding:45px 10px;
    text-align:center;
    color:#64748b;
    font-size:13px;
}

.funnel-view-error{
    display:none;
    padding:12px;
    margin-bottom:14px;
    border:1px solid #fecaca;
    border-radius:8px;
    background:#fef2f2;
    color:#b91c1c;
    font-size:12px;
    font-weight:600;
}

.funnel-view-content{
    display:none;
}

.funnel-view-content.is-visible{
    display:block;
}

.funnel-view-hero{
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px;
    border:1px solid #e5e7eb;
    border-radius:11px;
    background:#f8fafc;
    margin-bottom:18px;
}

.funnel-view-hero-icon{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#eff6ff;
    color:#2563eb;
    flex:0 0 auto;
}

.funnel-view-hero-icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.funnel-view-hero-copy{
    min-width:0;
    flex:1;
}

.funnel-view-name{
    color:#0f172a;
    font-size:16px;
    font-weight:800;
    line-height:1.35;
    word-break:break-word;
}

.funnel-view-id{
    margin-top:3px;
    color:#64748b;
    font-size:11px;
}

.funnel-view-status{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:0 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    text-transform:capitalize;
    flex:0 0 auto;
}

.funnel-view-section-title{
    margin:18px 0 9px;
    color:#334155;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.funnel-view-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    border:1px solid #e5e7eb;
    border-radius:10px;
    overflow:hidden;
}

.funnel-view-field{
    padding:12px 13px;
    border-bottom:1px solid #eef2f7;
}

.funnel-view-field:nth-child(odd){
    border-right:1px solid #eef2f7;
}

.funnel-view-field:nth-last-child(-n+2){
    border-bottom:none;
}

.funnel-view-field span{
    display:block;
    margin-bottom:4px;
    color:#94a3b8;
    font-size:11px;
}

.funnel-view-field strong{
    display:block;
    color:#334155;
    font-size:13px;
    font-weight:700;
    word-break:break-word;
}

.funnel-view-description{
    min-height:48px;
    padding:13px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    color:#475569;
    font-size:13px;
    line-height:1.6;
    white-space:pre-wrap;
    word-break:break-word;
}

.funnel-view-steps{
    border:1px solid #e5e7eb;
    border-radius:10px;
    overflow:hidden;
}

.funnel-view-step{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 13px;
    border-bottom:1px solid #eef2f7;
}

.funnel-view-step:last-child{
    border-bottom:none;
}

.funnel-view-step-number{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#eff6ff;
    color:#1e40af;
    font-size:11px;
    font-weight:800;
    flex:0 0 auto;
}

.funnel-view-step-name{
    color:#334155;
    font-size:13px;
    font-weight:700;
}

.funnel-view-empty{
    padding:22px;
    text-align:center;
    color:#94a3b8;
    font-size:12px;
}

.funnel-view-footer{
    display:flex;
    justify-content:flex-end;
    padding:15px 20px;
    border-top:1px solid #e5e7eb;
    background:#fafafa;
    flex:0 0 auto;
}

.funnel-view-done{
    height:38px;
    padding:0 16px;
    border:0;
    border-radius:8px;
    background:#2563eb;
    color:#fff;
    font:700 12px Inter,sans-serif;
    cursor:pointer;
}

.funnel-view-done:hover{
    background:#1d4ed8;
}

@media(max-width:700px){
    .funnel-view-grid{
        grid-template-columns:1fr;
    }
    .funnel-view-field:nth-child(odd){
        border-right:none;
    }
    .funnel-view-field:nth-last-child(-n+2){
        border-bottom:1px solid #eef2f7;
    }
    .funnel-view-field:last-child{
        border-bottom:none;
    }
    .funnel-view-hero{
        align-items:flex-start;
    }
    .funnel-view-status{
        margin-left:auto;
    }
}