@import '_content/FlexCore/FlexCore.ofx9z0uybb.bundle.scp.css';

/* /Components/Jobs/GateDecisionDialog.razor.rz.scp.css */
.gate-dialog[b-2ockmollw3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.82rem;
}

.gate-header[b-2ockmollw3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gate-role[b-2ockmollw3], .gate-opened[b-2ockmollw3], .gate-duration[b-2ockmollw3], .gate-next[b-2ockmollw3], .gate-hint[b-2ockmollw3], .gate-resolved[b-2ockmollw3] {
    color: #64748b;
    font-size: 0.78rem;
}

.gate-body[b-2ockmollw3], .gate-errors[b-2ockmollw3], .gate-explain[b-2ockmollw3] {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    padding: 8px;
    border-radius: 4px;
    font-size: 0.78rem;
}

.gate-body[b-2ockmollw3] { background: #f8fafc; border: 1px solid #e2e8f0; font-family: inherit; }
.gate-errors[b-2ockmollw3] { background: #1e293b; color: #e2e8f0; max-height: 220px; overflow: auto; }
.gate-explain[b-2ockmollw3] { background: #ecfdf5; border: 1px solid #a7f3d0; font-family: inherit; max-height: 320px; overflow: auto; }

.gate-counts[b-2ockmollw3], .gate-checkpoint[b-2ockmollw3], .gate-budget-row[b-2ockmollw3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gate-list[b-2ockmollw3] {
    margin: 0;
    padding-left: 18px;
}

h4[b-2ockmollw3] {
    margin: 8px 0 2px;
    font-size: 0.85rem;
}
/* /Components/Jobs/PipelineProgressView.razor.rz.scp.css */
/* The rules the Pipeline Progress dialog body carried in VBToDotNetMigrator.razor.css, moved here with it. */

.ide-btn[b-y3g29vyqs6] {
    background: #3c3c3c;
    color: #cccccc;
    border: 1px solid #505050;
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1.4;
}
.ide-btn:hover:not(:disabled)[b-y3g29vyqs6] { background: #505050; }
.ide-btn:disabled[b-y3g29vyqs6] { opacity: 0.4; cursor: default; }
.ide-btn-cancel[b-y3g29vyqs6] { background: #5a1d1d; color: #f48771; border-color: #8b3232; }
.ide-btn-cancel:hover:not(:disabled)[b-y3g29vyqs6] { background: #6e2424; }

/* ===== Pipeline progress (in dialog) ===== */
.pipeline-progress[b-y3g29vyqs6] {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: #f1f5f9;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.pipeline-phase[b-y3g29vyqs6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.phase-name[b-y3g29vyqs6] { font-weight: 600; font-size: 0.76rem; }
.phase-status[b-y3g29vyqs6] { font-size: 0.7rem; color: #64748b; }

.phase-ok[b-y3g29vyqs6] { background: #dcfce7; border-color: #86efac; }
.phase-fail[b-y3g29vyqs6] { background: #fee2e2; border-color: #fca5a5; }
.phase-running[b-y3g29vyqs6] { background: #dbeafe; border-color: #93c5fd; animation: pulse-phase-b-y3g29vyqs6 1.2s infinite; }
.phase-skip[b-y3g29vyqs6] { background: #f1f5f9; border-color: #cbd5e1; opacity: 0.7; }
.phase-pending[b-y3g29vyqs6] { background: #fff; border-color: #e2e8f0; opacity: 0.5; }

@keyframes pulse-phase-b-y3g29vyqs6 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.pipeline-errors-content[b-y3g29vyqs6] {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.4;
    max-height: 180px;
    overflow-y: auto;
    padding: 8px;
    margin: 4px 0 0;
    background: #1e293b;
    color: #fca5a5;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ===== Batch Progress (inside Pipeline dialog) ===== */

.batch-summary[b-y3g29vyqs6] {
    padding: 8px 10px;
    margin: 8px 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.batch-summary-row[b-y3g29vyqs6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
}

.batch-summary-label[b-y3g29vyqs6] { font-weight: 600; color: #334155; }
.batch-summary-value[b-y3g29vyqs6] { color: #475569; flex: 1; }

.batch-cancel-btn[b-y3g29vyqs6] {
    font-size: 0.72rem !important;
    padding: 2px 8px !important;
}

.batch-progress-bar[b-y3g29vyqs6] {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    margin: 6px 0 4px;
    overflow: hidden;
}

.batch-progress-fill[b-y3g29vyqs6] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.batch-active-file[b-y3g29vyqs6] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    padding: 2px 0;
}

.batch-active-icon[b-y3g29vyqs6] { font-size: 0.9rem; }
.batch-active-name[b-y3g29vyqs6] { font-weight: 600; color: #1e40af; }
.batch-active-status[b-y3g29vyqs6] { color: #2563eb; }

.batch-file-list[b-y3g29vyqs6] {
    max-height: 280px;
    overflow-y: auto;
    margin: 4px 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.batch-file-row[b-y3g29vyqs6] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 0.76rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

.batch-file-row:last-child[b-y3g29vyqs6] { border-bottom: none; }

.batch-file-icon[b-y3g29vyqs6] { font-size: 0.85rem; width: 20px; text-align: center; flex-shrink: 0; }
.batch-file-name[b-y3g29vyqs6] { font-weight: 500; min-width: 140px; color: #334155; }
.batch-file-status[b-y3g29vyqs6] { flex: 1; color: #64748b; }
.batch-file-attempts[b-y3g29vyqs6] { color: #7c3aed; font-size: 0.7rem; }
.batch-file-errors[b-y3g29vyqs6] { color: #dc2626; font-size: 0.7rem; font-weight: 500; }

.batch-queued[b-y3g29vyqs6] { background: #fff; opacity: 0.6; }
.batch-ok[b-y3g29vyqs6] { background: #f0fdf4; }
.batch-fail[b-y3g29vyqs6] { background: #fef2f2; }
.batch-skip[b-y3g29vyqs6] { background: #f8fafc; opacity: 0.7; }
.batch-running[b-y3g29vyqs6] { background: #eff6ff; animation: pulse-phase-b-y3g29vyqs6 1.5s infinite; }

.batch-file-error-detail[b-y3g29vyqs6] {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.68rem;
    line-height: 1.3;
    max-height: 80px;
    overflow-y: auto;
    padding: 4px 8px 4px 34px;
    margin: 0;
    background: #1e293b;
    color: #fca5a5;
    white-space: pre-wrap;
    word-break: break-word;
}

.batch-empty-msg[b-y3g29vyqs6] {
    padding: 20px;
    text-align: center;
    color: #64748b;
    font-size: 0.85rem;
}

.pipeline-errors-block[b-y3g29vyqs6] {
    margin: 6px 0;
}

.pipeline-errors-block summary[b-y3g29vyqs6] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #dc2626;
    cursor: pointer;
    padding: 4px 0;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.mutarjim-app[b-stte0h56yj] {
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#blazor-error-ui[b-stte0h56yj] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-stte0h56yj] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-yqh2ufljvr] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-yqh2ufljvr] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-yqh2ufljvr] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-yqh2ufljvr] {
    font-size: 1.1rem;
}

.bi[b-yqh2ufljvr] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-yqh2ufljvr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-yqh2ufljvr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-yqh2ufljvr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-yqh2ufljvr] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-yqh2ufljvr] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-yqh2ufljvr] {
        padding-bottom: 1rem;
    }

    .nav-item[b-yqh2ufljvr]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-yqh2ufljvr]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-yqh2ufljvr]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-yqh2ufljvr] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-yqh2ufljvr] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-yqh2ufljvr] {
        display: none;
    }

    .nav-scrollable[b-yqh2ufljvr] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-zd7g5qjdnp],
.components-reconnect-repeated-attempt-visible[b-zd7g5qjdnp],
.components-reconnect-failed-visible[b-zd7g5qjdnp],
.components-pause-visible[b-zd7g5qjdnp],
.components-resume-failed-visible[b-zd7g5qjdnp],
.components-rejoining-animation[b-zd7g5qjdnp] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-zd7g5qjdnp],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-zd7g5qjdnp],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-zd7g5qjdnp],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-zd7g5qjdnp],
#components-reconnect-modal.components-reconnect-retrying[b-zd7g5qjdnp],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-zd7g5qjdnp],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-zd7g5qjdnp],
#components-reconnect-modal.components-reconnect-failed[b-zd7g5qjdnp],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-zd7g5qjdnp] {
    display: block;
}


#components-reconnect-modal[b-zd7g5qjdnp] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-zd7g5qjdnp 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-zd7g5qjdnp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-zd7g5qjdnp 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-zd7g5qjdnp]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-zd7g5qjdnp 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-zd7g5qjdnp {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-zd7g5qjdnp {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-zd7g5qjdnp {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-zd7g5qjdnp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-zd7g5qjdnp] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-zd7g5qjdnp] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-zd7g5qjdnp] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-zd7g5qjdnp] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-zd7g5qjdnp] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-zd7g5qjdnp] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-zd7g5qjdnp 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-zd7g5qjdnp] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-zd7g5qjdnp {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AlignScreensDialog.razor.rz.scp.css */
.align-screens-layout[b-jjob9elqfg] {
    display: flex;
    height: 700px;
    background-color: #0b0f17;
    color: #f1f5f9;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    border-radius: 8px;
    overflow: hidden;
}

/* Sidebar Styling */
.align-screens-sidebar[b-jjob9elqfg] {
    width: 320px;
    border-right: 1px solid #1e293b;
    display: flex;
    flex-direction: column;
    background-color: #0f172a;
    flex-shrink: 0;
}

.sidebar-search[b-jjob9elqfg] {
    padding: 16px;
    border-bottom: 1px solid #1e293b;
}

.search-input[b-jjob9elqfg] {
    width: 100%;
    padding: 8px 12px;
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus[b-jjob9elqfg] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.screens-list[b-jjob9elqfg] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px;
}

.screen-item[b-jjob9elqfg] {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: background-color 0.15s, transform 0.1s;
    user-select: none;
}

.screen-item:hover[b-jjob9elqfg] {
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateX(2px);
}

.screen-item.selected[b-jjob9elqfg] {
    background-color: rgba(59, 130, 246, 0.15);
    border-left: 3px solid #3b82f6;
    padding-left: 11px;
}

.screen-section[b-jjob9elqfg] {
    font-size: 12px;
    font-weight: 700;
    color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    min-width: 36px;
    text-align: center;
}

.screen-title[b-jjob9elqfg] {
    font-size: 13px;
    font-weight: 500;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.gap-badge[b-jjob9elqfg] {
    background-color: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 6px;
    margin-left: 6px;
    min-width: 18px;
    text-align: center;
}

/* Main Content Area */
.align-screens-main[b-jjob9elqfg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow-y: auto;
    background-color: #0b0f17;
}

.no-screen-selected[b-jjob9elqfg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #64748b;
    text-align: center;
}

.select-hint-icon[b-jjob9elqfg] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.screen-header[b-jjob9elqfg] {
    margin-bottom: 24px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 16px;
}

.screen-meta-row[b-jjob9elqfg] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.screen-tag[b-jjob9elqfg] {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    background-color: #1e293b;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.screen-header h2[b-jjob9elqfg] {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.screen-summary[b-jjob9elqfg] {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

/* Screenshots Layout */
.screenshot-comparison-grid[b-jjob9elqfg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.screenshot-panel[b-jjob9elqfg] {
    border: 1px solid #1e293b;
    border-radius: 8px;
    background-color: #0f172a;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.panel-header[b-jjob9elqfg] {
    background-color: #1e293b;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
    border-bottom: 1px solid #334155;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.image-wrapper[b-jjob9elqfg] {
    padding: 16px;
    background-color: #020617;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-wrapper img[b-jjob9elqfg] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.no-image-placeholder[b-jjob9elqfg] {
    color: #475569;
    font-size: 13px;
    font-style: italic;
}

/* Details and Mappings section */
.screen-details-grid[b-jjob9elqfg] {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 20px;
}

.details-section[b-jjob9elqfg] {
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.details-section h3[b-jjob9elqfg] {
    margin: 0 0 16px 0;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 8px;
}

/* Mappings Styling */
.mappings-list[b-jjob9elqfg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mapping-row[b-jjob9elqfg] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mapping-row:last-child[b-jjob9elqfg] {
    border-bottom: none;
}

.mapping-type[b-jjob9elqfg] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    width: 60px;
    text-align: center;
}

.mapping-type.vb6[b-jjob9elqfg] {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.mapping-type.blazor[b-jjob9elqfg] {
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.mapping-info[b-jjob9elqfg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.file-link-btn[b-jjob9elqfg] {
    background: none;
    border: none;
    color: #60a5fa;
    text-align: left;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    outline: none;
}

.file-link-btn:hover[b-jjob9elqfg] {
    color: #93c5fd;
    text-decoration: underline;
}

.file-missing[b-jjob9elqfg] {
    color: #ef4444;
    font-size: 14px;
    font-style: italic;
}

.mapping-route[b-jjob9elqfg] {
    font-size: 12px;
    color: #64748b;
    font-family: monospace;
}

/* Gaps Styling */
.gaps-header[b-jjob9elqfg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 8px;
}

.gaps-header h3[b-jjob9elqfg] {
    margin: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.add-gap-btn[b-jjob9elqfg] {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}

.add-gap-btn:hover[b-jjob9elqfg] {
    background-color: #1d4ed8;
}

.no-gaps-message[b-jjob9elqfg] {
    color: #10b981;
    font-size: 13px;
    font-style: italic;
    background-color: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
}

.gaps-list[b-jjob9elqfg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 250px;
    overflow-y: auto;
}

.gap-card[b-jjob9elqfg] {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 12px;
}

.gap-card-header[b-jjob9elqfg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.gap-severity-tag[b-jjob9elqfg] {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.gap-severity-tag.high[b-jjob9elqfg] {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.gap-severity-tag.medium[b-jjob9elqfg] {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.gap-severity-tag.low[b-jjob9elqfg] {
    background-color: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.gap-type-tag[b-jjob9elqfg] {
    font-size: 11px;
    color: #94a3b8;
    background-color: #0f172a;
    padding: 1px 6px;
    border-radius: 4px;
}

.gap-actions[b-jjob9elqfg] {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.gap-edit-btn[b-jjob9elqfg], .gap-delete-btn[b-jjob9elqfg] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    padding: 2px;
}

.gap-edit-btn[b-jjob9elqfg] {
    color: #60a5fa;
}

.gap-edit-btn:hover[b-jjob9elqfg] {
    color: #93c5fd;
    text-decoration: underline;
}

.gap-delete-btn[b-jjob9elqfg] {
    color: #ef4444;
    font-size: 14px;
    line-height: 1;
}

.gap-delete-btn:hover[b-jjob9elqfg] {
    color: #f87171;
}

.gap-desc[b-jjob9elqfg] {
    margin: 0;
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.4;
}

/* Nested Modal for Add/Edit Gap */
.nested-modal-backdrop[b-jjob9elqfg] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    animation: fadeIn-b-jjob9elqfg 0.2s ease-out;
}

.nested-modal-container[b-jjob9elqfg] {
    width: 480px;
    background-color: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nested-modal-header[b-jjob9elqfg] {
    background-color: #1e293b;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #334155;
}

.nested-modal-header h4[b-jjob9elqfg] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.close-modal-btn[b-jjob9elqfg] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.close-modal-btn:hover[b-jjob9elqfg] {
    color: #ffffff;
}

.nested-modal-body[b-jjob9elqfg] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group[b-jjob9elqfg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-jjob9elqfg] {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

.form-control[b-jjob9elqfg] {
    width: 100%;
    padding: 8px 12px;
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 13px;
    outline: none;
}

.form-control:focus[b-jjob9elqfg] {
    border-color: #3b82f6;
}

textarea.form-control[b-jjob9elqfg] {
    resize: none;
    font-family: inherit;
}

.nested-modal-footer[b-jjob9elqfg] {
    background-color: #1e293b;
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #334155;
}

.modal-btn-cancel[b-jjob9elqfg] {
    background: none;
    border: 1px solid #334155;
    color: #94a3b8;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
}

.modal-btn-cancel:hover[b-jjob9elqfg] {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.modal-btn-save[b-jjob9elqfg] {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
}

.modal-btn-save:hover[b-jjob9elqfg] {
    background-color: #1d4ed8;
}

.modal-btn-save:disabled[b-jjob9elqfg] {
    background-color: #1e293b;
    color: #475569;
    cursor: not-allowed;
    border: 1px solid #334155;
}

@keyframes fadeIn-b-jjob9elqfg {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Replace screenshot button */
.replace-img-label[b-jjob9elqfg] {
    display: inline-block;
    background-color: #2563eb;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    transition: background-color 0.15s;
    user-select: none;
}

.replace-img-label:hover[b-jjob9elqfg] {
    background-color: #1d4ed8;
}

/* Global calibration bar styling */
.global-calibration-bar[b-jjob9elqfg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 12px 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.global-calibration-bar .section-title[b-jjob9elqfg] {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.calibration-inputs[b-jjob9elqfg] {
    display: flex;
    gap: 16px;
}

/* Form controls and settings layout inside panels */
.panel-settings[b-jjob9elqfg] {
    padding: 16px;
    background-color: #0f172a;
    border-top: 1px solid #1e293b;
}

.panel-settings h4[b-jjob9elqfg] {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 6px;
}

.settings-grid[b-jjob9elqfg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.form-group-inline[b-jjob9elqfg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-group-inline label[b-jjob9elqfg] {
    font-size: 12px;
    color: #94a3b8;
    min-width: 80px;
    flex-shrink: 0;
}

.form-control-sm[b-jjob9elqfg] {
    width: 100%;
    padding: 5px 8px;
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 4px;
    color: #f1f5f9;
    font-size: 12px;
    outline: none;
}

.form-control-sm:focus[b-jjob9elqfg] {
    border-color: #3b82f6;
}

.checkbox-inline[b-jjob9elqfg] {
    grid-column: span 2;
}

.checkbox-inline label[b-jjob9elqfg] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: #cbd5e1;
}

.checkbox-inline input[b-jjob9elqfg] {
    cursor: pointer;
}

.settings-actions[b-jjob9elqfg] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-save-settings[b-jjob9elqfg] {
    background-color: #334155;
    color: #f1f5f9;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border: 1px solid #475569;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-save-settings:hover[b-jjob9elqfg] {
    background-color: #475569;
}

.btn-run-automation[b-jjob9elqfg] {
    background-color: #10b981;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-run-automation:hover[b-jjob9elqfg] {
    background-color: #059669;
}

.btn-run-automation:disabled[b-jjob9elqfg] {
    background-color: #374151;
    color: #9ca3af;
    cursor: not-allowed;
}

.automation-status[b-jjob9elqfg] {
    margin-top: 10px;
    font-size: 11px;
    color: #34d399;
    text-align: right;
    font-family: monospace;
}

/* Live IFrame layout */
.blazor-iframe[b-jjob9elqfg] {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #ffffff;
    border-radius: 4px;
}

/* Header Tabs */
.header-tabs[b-jjob9elqfg] {
    display: flex;
    gap: 4px;
}

.tab-btn[b-jjob9elqfg] {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.tab-btn:hover[b-jjob9elqfg] {
    background-color: #1e293b;
    color: #cbd5e1;
}

.tab-btn.active[b-jjob9elqfg] {
    background-color: #3b82f6;
    color: #ffffff;
}

/* /Components/Pages/FAssessment.razor.rz.scp.css */
.assess-page[b-q5zyeb2epu] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 8px 12px;
    box-sizing: border-box;
    gap: 8px;
    background: #f8fafc;
}

.assess-filter-label[b-q5zyeb2epu] {
    font-size: 0.8rem;
    color: #475569;
    margin: 0 4px 0 12px;
}

.assess-alerts[b-q5zyeb2epu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.assess-running[b-q5zyeb2epu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    background: #eff6ff;
}

.assess-tiles[b-q5zyeb2epu] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

[b-q5zyeb2epu] .assess-tile {
    flex: 1 1 150px;
    min-width: 150px;
    margin: 0;
}

[b-q5zyeb2epu] .assess-tile .fx-card-body {
    padding: 4px 8px 6px;
}

[b-q5zyeb2epu] .assess-tile .fx-card-header {
    padding: 4px 8px 0;
}

[b-q5zyeb2epu] .assess-tile .fx-card-title {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

.assess-tile-detail[b-q5zyeb2epu] {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    color: #475569;
}

.assess-charts[b-q5zyeb2epu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

[b-q5zyeb2epu] .assess-chart {
    flex: 1 1 280px;
    min-width: 280px;
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
}

.assess-tabs-host[b-q5zyeb2epu] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.assess-tab[b-q5zyeb2epu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0;
}

.assess-filters[b-q5zyeb2epu] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.assess-detail[b-q5zyeb2epu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.assess-detail-title[b-q5zyeb2epu] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
}

.assess-empty[b-q5zyeb2epu] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 4px 0;
}

.assess-methodology[b-q5zyeb2epu] {
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.5;
    max-width: 70rem;
    overflow: auto;
}

.assess-methodology h3[b-q5zyeb2epu] {
    font-size: 0.9rem;
    margin: 10px 0 4px;
}

.assess-methodology code[b-q5zyeb2epu] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    background: #f1f5f9;
    padding: 0 3px;
}

[b-q5zyeb2epu] .assess-snippet textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
}
/* /Components/Pages/FDecomposition.razor.rz.scp.css */
.decomp-page[b-wgip2chqcj] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 8px 12px;
    box-sizing: border-box;
    gap: 8px;
    background: #f8fafc;
}

.decomp-filter-label[b-wgip2chqcj] {
    font-size: 0.8rem;
    color: #475569;
    margin: 0 4px 0 12px;
}

[b-wgip2chqcj] .decomp-stepper {
    padding: 2px 0;
}

.decomp-alerts[b-wgip2chqcj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.decomp-tabs-host[b-wgip2chqcj] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.decomp-tab[b-wgip2chqcj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0;
}

[b-wgip2chqcj] .decomp-edit-toolbar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

[b-wgip2chqcj] .decomp-board {
    min-height: 220px;
    max-height: 420px;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
    padding: 6px;
}

.decomp-card[b-wgip2chqcj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
}

.decomp-card-name[b-wgip2chqcj] {
    font-weight: 600;
    color: #1e293b;
}

.decomp-card-file[b-wgip2chqcj] {
    flex-basis: 100%;
    font-size: 0.7rem;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.decomp-detail-title[b-wgip2chqcj] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
}

.decomp-empty[b-wgip2chqcj] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 4px 0;
}

.decomp-wave-strip[b-wgip2chqcj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.decomp-wave-summary[b-wgip2chqcj] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
    font-size: 0.8rem;
}

.decomp-wave-name[b-wgip2chqcj] {
    font-weight: 600;
    color: #334155;
}

[b-wgip2chqcj] .decomp-chart {
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
}

.decomp-signoff[b-wgip2chqcj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #fde68a;
    border-radius: 4px;
    background: #fffbeb;
}

.decomp-signoff-head[b-wgip2chqcj] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.decomp-signoff-title[b-wgip2chqcj] {
    font-size: 0.82rem;
    color: #334155;
}

.decomp-signoff-buttons[b-wgip2chqcj] {
    display: flex;
    gap: 6px;
}

[b-wgip2chqcj] .gate-btn-stop {
    color: #b91c1c;
}

.decomp-dialog[b-wgip2chqcj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.decomp-dialog label[b-wgip2chqcj] {
    font-size: 0.8rem;
    color: #475569;
}
/* /Components/Pages/FExplain.razor.rz.scp.css */
.explain-page[b-j0ncrfdbeb] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 8px 12px;
    box-sizing: border-box;
    gap: 8px;
    background: #f8fafc;
}

.explain-filter-label[b-j0ncrfdbeb] {
    font-size: 0.8rem;
    color: #475569;
    margin: 0 4px 0 12px;
}

.explain-ceiling[b-j0ncrfdbeb] {
    font-size: 0.75rem;
    color: #475569;
    margin-right: 8px;
}

.explain-alerts[b-j0ncrfdbeb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.explain-running[b-j0ncrfdbeb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    background: #eff6ff;
}

.explain-tiles[b-j0ncrfdbeb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

[b-j0ncrfdbeb] .explain-tile {
    flex: 1 1 150px;
    min-width: 150px;
    margin: 0;
}

[b-j0ncrfdbeb] .explain-tile .fx-card-body {
    padding: 4px 8px 6px;
}

[b-j0ncrfdbeb] .explain-tile .fx-card-header {
    padding: 4px 8px 0;
}

[b-j0ncrfdbeb] .explain-tile .fx-card-title {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

.explain-tile-detail[b-j0ncrfdbeb] {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    color: #475569;
}

.explain-charts[b-j0ncrfdbeb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

[b-j0ncrfdbeb] .explain-chart {
    flex: 1 1 280px;
    min-width: 280px;
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
}

.explain-tabs-host[b-j0ncrfdbeb] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.explain-tab[b-j0ncrfdbeb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0;
}

.explain-filters[b-j0ncrfdbeb] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.explain-detail[b-j0ncrfdbeb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.explain-detail-title[b-j0ncrfdbeb] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
}

.explain-empty[b-j0ncrfdbeb] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 4px 0;
}

.explain-tree[b-j0ncrfdbeb] {
    height: 100%;
    overflow: auto;
    border-right: 1px solid #e2e8f0;
}

.explain-doc[b-j0ncrfdbeb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    overflow: auto;
    padding: 0 6px;
}

[b-j0ncrfdbeb] .explain-doc-card {
    margin: 0;
}

[b-j0ncrfdbeb] .explain-doc-card .fx-card-body {
    padding: 4px 8px 6px;
}

.explain-doc-head[b-j0ncrfdbeb] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.explain-doc-meta[b-j0ncrfdbeb] {
    font-size: 0.72rem;
    color: #64748b;
}

.explain-summary[b-j0ncrfdbeb] {
    font-size: 0.85rem;
    color: #1e293b;
    margin: 4px 0;
}

.explain-lists[b-j0ncrfdbeb] {
    font-size: 0.78rem;
    color: #475569;
    margin: 2px 0 4px;
}

.explain-claim[b-j0ncrfdbeb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px 0;
    border-top: 1px solid #f1f5f9;
    font-size: 0.82rem;
    color: #1e293b;
}

.explain-claim-text[b-j0ncrfdbeb] {
    flex: 1 1 320px;
}

[b-j0ncrfdbeb] .explain-chip {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
}

.explain-routine[b-j0ncrfdbeb] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 2px 0;
    font-size: 0.8rem;
}

.explain-routine-name[b-j0ncrfdbeb] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    color: #334155;
}

.explain-routine-purpose[b-j0ncrfdbeb] {
    color: #475569;
}

[b-j0ncrfdbeb] .explain-span textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
}

[b-j0ncrfdbeb] .explain-chat {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
}

.explain-message[b-j0ncrfdbeb] {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.85rem;
    margin: 4px 0;
}

.explain-methodology[b-j0ncrfdbeb] {
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.5;
    max-width: 70rem;
    overflow: auto;
}

.explain-methodology h3[b-j0ncrfdbeb] {
    font-size: 0.9rem;
    margin: 10px 0 4px;
}

.explain-methodology code[b-j0ncrfdbeb] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    background: #f1f5f9;
    padding: 0 3px;
}
/* /Components/Pages/FFeedback.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────
   Feedback / Testing — VB6-classic (Win9x/2000) theme: 3D button-face gray,
   sunken white content areas, navy selection, Tahoma/MS Sans Serif.
   ───────────────────────────────────────────────────────────────────────── */

.feedback-screen-container[b-rjggj7v5bd] {
    width: 100%;
    height: 100vh;
    background: #d4d0c8;                 /* classic 3D button face */
    display: flex;
    overflow: hidden;
    color: #000;
    font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;
    font-size: calc(12px * var(--fx-zoom, 1));
    border: 1px solid #808080;
}

/* ── Left Sidebar ── */
.feedback-sidebar[b-rjggj7v5bd] {
    width: 290px;
    min-width: 290px;
    background: #d4d0c8;
    border-right: 1px solid #808080;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sidebar-header[b-rjggj7v5bd] {
    padding: 8px 10px;
    border-bottom: 1px solid #808080;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #d4d0c8;
}

.sidebar-header h3[b-rjggj7v5bd] {
    margin: 0;
    font-size: calc(13px * var(--fx-zoom, 1));
    font-weight: bold;
    color: #000080;                      /* classic navy caption */
}

.sidebar-search[b-rjggj7v5bd] {
    padding: 8px 10px;
    border-bottom: 1px solid #aca899;
}

/* Sunken text fields (VB6 fixed-3D) */
.sidebar-search input[b-rjggj7v5bd],
.form-control[b-rjggj7v5bd],
.feedback-screen-container .form-control[b-rjggj7v5bd] {
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;   /* sunken */
    color: #000;
    border-radius: 0;
    font-family: Tahoma, "MS Sans Serif", sans-serif;
    font-size: calc(12px * var(--fx-zoom, 1));
    padding: 3px 5px;
}

.sidebar-search input:focus[b-rjggj7v5bd],
.feedback-screen-container .form-control:focus[b-rjggj7v5bd] {
    outline: 1px dotted #000080;
    box-shadow: none;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    color: #000;
}

.sidebar-group-toggle[b-rjggj7v5bd] {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: #d4d0c8;
    border-bottom: 1px solid #aca899;
    gap: 6px;
    font-size: calc(11px * var(--fx-zoom, 1));
    color: #000;
}

.sidebar-group-toggle span[b-rjggj7v5bd] { margin-right: auto; }

.btn-xs[b-rjggj7v5bd] {
    padding: 1px 8px;
    font-size: calc(11px * var(--fx-zoom, 1));
    border-radius: 0;
}

/* Tree area: sunken white list */
.sidebar-tree[b-rjggj7v5bd] {
    flex-grow: 1;
    overflow-y: auto;
    margin: 8px;
    padding: 6px;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;   /* sunken */
}

.sidebar-tree[b-rjggj7v5bd]::-webkit-scrollbar,
.main-content[b-rjggj7v5bd]::-webkit-scrollbar { width: 16px; height: 16px; }
.sidebar-tree[b-rjggj7v5bd]::-webkit-scrollbar-thumb,
.main-content[b-rjggj7v5bd]::-webkit-scrollbar-thumb { background: #d4d0c8; border: 1px solid #808080; }
.sidebar-tree[b-rjggj7v5bd]::-webkit-scrollbar-track,
.main-content[b-rjggj7v5bd]::-webkit-scrollbar-track { background: #e8e6df; }

.tree-root[b-rjggj7v5bd], .tree-sub[b-rjggj7v5bd], .tree-items[b-rjggj7v5bd] {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.tree-sub[b-rjggj7v5bd] { padding-left: 14px; margin-left: 6px; }
.tree-items[b-rjggj7v5bd] { padding-left: 16px; margin-left: 6px; }

.tree-node[b-rjggj7v5bd] { margin-bottom: 1px; }

.node-title[b-rjggj7v5bd] {
    display: flex;
    align-items: center;
    padding: 3px 6px;
    cursor: default;
    font-size: calc(12px * var(--fx-zoom, 1));
    font-weight: bold;
    color: #000;
    gap: 5px;
}

.node-title:hover[b-rjggj7v5bd] { background: #e8e6df; }
.node-title i[b-rjggj7v5bd] { font-size: calc(10px * var(--fx-zoom, 1)); color: #000080; }

.sub-node-title[b-rjggj7v5bd] { font-size: calc(12px * var(--fx-zoom, 1)); font-weight: normal; color: #222; }

.topic-group-name[b-rjggj7v5bd] {
    max-width: 165px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-item[b-rjggj7v5bd] {
    display: flex;
    flex-direction: column;
    padding: 3px 8px;
    cursor: default;
    margin-bottom: 0;
    font-size: calc(12px * var(--fx-zoom, 1));
    color: #000;
}

.tree-item:hover[b-rjggj7v5bd] { background: #e8e6df; }

.tree-item.active[b-rjggj7v5bd] {
    background: #316ac5;                 /* selection blue */
    color: #ffffff;
}

.item-time[b-rjggj7v5bd], .item-date[b-rjggj7v5bd] { font-size: calc(11px * var(--fx-zoom, 1)); color: #444; }
.tree-item.active .item-time[b-rjggj7v5bd], .tree-item.active .item-date[b-rjggj7v5bd] { color: #dbe7ff; }

.item-topic[b-rjggj7v5bd] {
    font-weight: bold;
    margin: 1px 0;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tree-item.active .item-topic[b-rjggj7v5bd] { color: #ffffff; }

.item-user[b-rjggj7v5bd] { font-size: calc(11px * var(--fx-zoom, 1)); color: #444; }
.tree-item.active .item-user[b-rjggj7v5bd] { color: #dbe7ff; }

/* FlexKit TreeGridControl node labels (history). */
.fb-node-group[b-rjggj7v5bd] { font-weight: bold; color: #000; }
.fb-node-ticket[b-rjggj7v5bd] { display: inline-flex; align-items: baseline; gap: 6px; }
.fb-node-main[b-rjggj7v5bd] { color: #000; }
.fb-node-sub[b-rjggj7v5bd] { font-size: calc(10px * var(--fx-zoom, 1)); color: #555; }

.tree-loading[b-rjggj7v5bd], .tree-empty[b-rjggj7v5bd] {
    text-align: center;
    color: #555;
    font-size: calc(12px * var(--fx-zoom, 1));
    padding: 24px 10px;
}

/* ── Right Content Panel ── */
.feedback-main[b-rjggj7v5bd] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #d4d0c8;
    position: relative;
}

.main-header[b-rjggj7v5bd] {
    padding: 6px 14px;
    /* classic gradient title bar */
    background: linear-gradient(180deg, #1c5fc4 0%, #2f7be0 100%);
    border-bottom: 1px solid #808080;
    display: flex;
    align-items: center;
}

.main-header h2[b-rjggj7v5bd] {
    margin: 0;
    font-size: calc(13px * var(--fx-zoom, 1));
    font-weight: bold;
    color: #ffffff;
}

.main-content[b-rjggj7v5bd] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 12px;
    position: relative;
}

.empty-state[b-rjggj7v5bd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #555;
}

/* ── Edit Panel ── */
.edit-panel[b-rjggj7v5bd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

/* Raised 3D group panels */
.draw-workspace[b-rjggj7v5bd],
.form-section[b-rjggj7v5bd],
.metadata-grid[b-rjggj7v5bd],
.description-section[b-rjggj7v5bd] {
    background: #d4d0c8;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;   /* raised */
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.canvas-toolbar[b-rjggj7v5bd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: #d4d0c8;
    padding: 5px 8px;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
}

.toolbar-group[b-rjggj7v5bd] { display: flex; align-items: center; gap: 6px; }

.tb-label[b-rjggj7v5bd] {
    font-size: calc(11px * var(--fx-zoom, 1));
    color: #000;
    font-weight: bold;
}

/* 3D raised tool buttons; active = pressed (sunken) */
.tool-btn[b-rjggj7v5bd] {
    min-width: 30px;
    height: 26px;
    padding: 0 7px;
    font-size: calc(12px * var(--fx-zoom, 1));
    background: #d4d0c8;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;   /* raised */
    color: #000;
    cursor: pointer;
    border-radius: 0;
}
.tool-btn:hover[b-rjggj7v5bd] { background: #e0ddd5; }
.tool-btn.active[b-rjggj7v5bd] {
    border-color: #808080 #ffffff #ffffff #808080;   /* sunken/pressed */
    background: #c8c4bc;
}

.colors[b-rjggj7v5bd] { gap: 3px; }

.color-btn[b-rjggj7v5bd] {
    width: 20px;
    height: 20px;
    border-radius: 0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    cursor: pointer;
    padding: 0;
}
.color-btn.active[b-rjggj7v5bd] {
    border-color: #808080 #ffffff #ffffff #808080;
    outline: 1px solid #000080;
}

.size[b-rjggj7v5bd] { width: 150px; }
.size input[type="range"][b-rjggj7v5bd] { height: 6px; }

.canvas-wrapper[b-rjggj7v5bd] {
    max-height: 44vh;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;   /* sunken viewport */
    background: #808080;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

#feedback-canvas-draw[b-rjggj7v5bd] {
    display: block;
    max-width: 100%;
    height: auto;
    cursor: crosshair;
}

.form-label[b-rjggj7v5bd] {
    font-size: calc(12px * var(--fx-zoom, 1));
    font-weight: bold;
    color: #000;
}

.input-group-text[b-rjggj7v5bd] {
    background: #d4d0c8;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    border-radius: 0;
    color: #000;
}

.form-control[readonly][b-rjggj7v5bd] { background: #e8e6df; color: #333; }

.form-actions[b-rjggj7v5bd] { display: flex; justify-content: flex-end; gap: 6px; }

/* ── View Panel ── */
.view-panel[b-rjggj7v5bd] { display: flex; flex-direction: column; gap: 12px; }

.metadata-grid[b-rjggj7v5bd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
}

.meta-item[b-rjggj7v5bd] { display: flex; flex-direction: column; gap: 2px; }

.meta-item label[b-rjggj7v5bd],
.description-section label[b-rjggj7v5bd],
.screenshot-section label[b-rjggj7v5bd] {
    font-size: calc(11px * var(--fx-zoom, 1));
    font-weight: bold;
    color: #000080;
}

.meta-val[b-rjggj7v5bd] { font-size: calc(12px * var(--fx-zoom, 1)); color: #000; }
.topic-val[b-rjggj7v5bd] { color: #000080; font-weight: bold; }

.description-text[b-rjggj7v5bd] {
    font-size: calc(12px * var(--fx-zoom, 1));
    line-height: 1.45;
    color: #000;
    white-space: pre-wrap;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 6px 8px;
}

.screenshot-section[b-rjggj7v5bd] { display: flex; flex-direction: column; gap: 6px; }

.screenshot-container[b-rjggj7v5bd] {
    background: #808080;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    overflow: auto;
    max-height: 44vh;
    display: flex;
    justify-content: center;
    cursor: zoom-in;
}

.annotated-image[b-rjggj7v5bd] {
    max-width: 100%;
    height: auto;
    display: block;
}
.annotated-image.zoomed[b-rjggj7v5bd] { max-width: none; cursor: zoom-out; }

.view-actions[b-rjggj7v5bd] { display: flex; flex-wrap: wrap; align-items: center; margin-top: 6px; gap: 6px; }
.download-label[b-rjggj7v5bd] { font-weight: bold; color: #000080; margin-right: 4px; }
.view-actions-spring[b-rjggj7v5bd] { flex: 1 1 auto; }

/* Redesign: full-bleed canvas + toolbar-launched modals. */
.main-content[b-rjggj7v5bd] { padding: 6px; }
.view-topbar[b-rjggj7v5bd] {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; background: #d4d0c8; border-bottom: 1px solid #808080; flex-wrap: wrap;
}
.view-topbar-title[b-rjggj7v5bd] { font-weight: bold; color: #000080; margin-left: 6px; }

/* App buttons injected into the DrawingControl toolbar — icon-above-label, matching .fx-tb-tool. */
.fb-toolbtn[b-rjggj7v5bd] {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
    min-width: 52px; padding: 5px 9px 4px; cursor: pointer; font: inherit; color: #1f2430;
    background: transparent; border: 1px solid transparent; border-radius: 8px;
}
.fb-toolbtn:hover[b-rjggj7v5bd] { background: #f1f2f5; }
.fb-toolbtn-ico[b-rjggj7v5bd] { display: flex; align-items: center; justify-content: center; height: 24px; font-size: calc(19px * var(--fx-zoom, 1)); line-height: 1; }
.fb-toolbtn-lbl[b-rjggj7v5bd] { font-size: calc(11px * var(--fx-zoom, 1)); color: #3a4150; white-space: nowrap; }

.tickets-toolbar[b-rjggj7v5bd] { margin-bottom: 8px; }

/* ─────────────────────────────────────────────────────────────────────────────
   Jira-standard ticket screen (Tickets→View read mode + Save edit mode).
   Light Atlassian-style theme, distinct from the VB6 gray capture chrome.
   ───────────────────────────────────────────────────────────────────────────── */
.jira-ticket[b-rjggj7v5bd] {
    display: flex; flex-direction: column;
    height: calc(100vh - 72px);
    background: #fff; color: #172b4d;
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    border: 1px solid #dfe1e6;
}
.jt-header[b-rjggj7v5bd] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; border-bottom: 1px solid #ebecf0; flex: 0 0 auto;
}
.jt-breadcrumb[b-rjggj7v5bd] { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fx-zoom, 1)); color: #626f86; }
.jt-key[b-rjggj7v5bd] { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #44546f; }
.jt-key i[b-rjggj7v5bd] { color: #1558bc; }
.jt-sep[b-rjggj7v5bd] { color: #c1c7d0; }
.jt-header-actions[b-rjggj7v5bd] { display: flex; align-items: center; gap: 8px; }
.jt-status-badge[b-rjggj7v5bd] {
    background: #dfe1e6; color: #44546f; font-weight: 600; font-size: calc(12px * var(--fx-zoom, 1));
    padding: 3px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em;
}
.jt-iconbtn[b-rjggj7v5bd] { border: 0; background: transparent; color: #626f86; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; }
.jt-iconbtn:hover[b-rjggj7v5bd] { background: #f1f2f4; }

.jt-body[b-rjggj7v5bd] { display: flex; flex: 1 1 auto; overflow: hidden; }
.jt-main[b-rjggj7v5bd] { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px; min-width: 0; }
.jt-side[b-rjggj7v5bd] { flex: 0 0 322px; border-left: 1px solid #ebecf0; overflow-y: auto; padding: 14px; background: #f7f8f9; }
/* Each sidebar panel (Details, Development) is a white card — Jira's right-rail look. */
.jt-side-box[b-rjggj7v5bd] { background: #fff; border: 1px solid #e4e6eb; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.jt-side-box:last-child[b-rjggj7v5bd] { margin-bottom: 0; }

.jt-title[b-rjggj7v5bd] { font-size: calc(22px * var(--fx-zoom, 1)); font-weight: 600; margin: 0 0 14px; color: #172b4d; }
.jt-title-input[b-rjggj7v5bd] {
    width: 100%; font-size: calc(22px * var(--fx-zoom, 1)); font-weight: 600; color: #172b4d;
    border: 1px solid transparent; border-radius: 4px; padding: 4px 6px; margin: 0 0 14px;
}
.jt-title-input:hover[b-rjggj7v5bd] { border-color: #dfe1e6; }
.jt-title-input:focus[b-rjggj7v5bd] { border-color: #0c66e4; outline: none; box-shadow: 0 0 0 1px #0c66e4; background: #fff; }

.jt-section[b-rjggj7v5bd] { margin-bottom: 20px; }
.jt-section-h[b-rjggj7v5bd] { font-size: calc(13px * var(--fx-zoom, 1)); font-weight: 600; color: #44546f; margin-bottom: 8px; }
.jt-count[b-rjggj7v5bd] { color: #626f86; font-weight: 400; }
.jt-desc[b-rjggj7v5bd] { font-size: calc(14px * var(--fx-zoom, 1)); line-height: 1.5; color: #172b4d; white-space: pre-wrap; }
/* Description body: well-known section headers (Navigation / Steps to Reproduce / …) render bold,
   matching Jira. Vertical spacing comes from the blank lines in the body text. */
.jt-desc-rich[b-rjggj7v5bd] { white-space: normal; }
.jt-desc-head[b-rjggj7v5bd] { font-weight: 700; color: #172b4d; }
/* Rendered rich-text (HTML authored in EditorLiteControl). */
.jt-desc-rich p[b-rjggj7v5bd] { margin: 0 0 8px; }
.jt-desc-rich p:last-child[b-rjggj7v5bd] { margin-bottom: 0; }
.jt-desc-rich h2[b-rjggj7v5bd] { font-size: calc(16px * var(--fx-zoom, 1)); font-weight: 700; color: #172b4d; margin: 12px 0 6px; }
.jt-desc-rich h3[b-rjggj7v5bd] { font-size: calc(14px * var(--fx-zoom, 1)); font-weight: 700; color: #172b4d; margin: 10px 0 4px; }
.jt-desc-rich ul[b-rjggj7v5bd], .jt-desc-rich ol[b-rjggj7v5bd] { margin: 4px 0 10px; padding-left: 22px; }
.jt-desc-rich li[b-rjggj7v5bd] { margin: 2px 0; }
.jt-desc-rich blockquote[b-rjggj7v5bd] { margin: 8px 0; padding: 4px 12px; border-left: 3px solid #dfe1e6; color: #44546f; }
.jt-desc-rich a[b-rjggj7v5bd] { color: #0c66e4; }
/* EditorLiteControl host in the ticket description. */
.jt-desc-editor[b-rjggj7v5bd] { width: 100%; }
.jt-desc-edit[b-rjggj7v5bd] {
    width: 100%; font-size: calc(14px * var(--fx-zoom, 1)); line-height: 1.5; color: #172b4d;
    border: 1px solid #dfe1e6; border-radius: 4px; padding: 8px 10px; resize: vertical; font-family: inherit;
}
.jt-desc-edit:focus[b-rjggj7v5bd] { border-color: #0c66e4; outline: none; box-shadow: 0 0 0 1px #0c66e4; }

.jt-attachments[b-rjggj7v5bd] { display: flex; flex-wrap: wrap; gap: 10px; }
/* Attachment delete overlay (HHM-144/157). */
.jt-attach-wrap[b-rjggj7v5bd] { position: relative; display: inline-flex; }
.jt-attach-wrap-pair[b-rjggj7v5bd] { flex: 1 1 0; min-width: 0; }
.jt-attach-del[b-rjggj7v5bd] {
    position: absolute; top: 4px; right: 4px; z-index: 3;
    width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%;
    background: rgba(23, 43, 77, .72); color: #fff; font-size: calc(10px * var(--fx-zoom, 1)); line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.jt-attach-del:hover[b-rjggj7v5bd] { background: #d04437; }
.jt-attach-card[b-rjggj7v5bd] { width: 200px; border: 1px solid #dfe1e6; border-radius: 6px; overflow: hidden; cursor: zoom-in; background: #fff; }
.jt-attach-card:hover[b-rjggj7v5bd] { border-color: #b3bac5; }
.jt-attach-thumbwrap[b-rjggj7v5bd] { height: 120px; background: #f4f5f7; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.jt-attach-thumb[b-rjggj7v5bd] { max-width: 100%; max-height: 120px; object-fit: contain; display: block; }
.jt-attach-meta[b-rjggj7v5bd] { padding: 6px 8px; border-top: 1px solid #ebecf0; }

/* Exactly two image attachments → larger, equal-height, side-by-side comparison (Legacy vs web). */
.jt-attachments-pair[b-rjggj7v5bd] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.jt-attach-card-pair[b-rjggj7v5bd] { width: auto; }
.jt-attach-card-pair .jt-attach-thumbwrap[b-rjggj7v5bd] { height: 340px; }
.jt-attach-card-pair .jt-attach-thumb[b-rjggj7v5bd] { max-height: 340px; max-width: 100%; }
.jt-attach-name[b-rjggj7v5bd] { font-size: calc(12px * var(--fx-zoom, 1)); font-weight: 600; color: #172b4d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-attach-sub[b-rjggj7v5bd] { font-size: calc(11px * var(--fx-zoom, 1)); color: #626f86; }
.jt-attach-file[b-rjggj7v5bd] { font-size: calc(44px * var(--fx-zoom, 1)); color: #6b778c; }
a.jt-attach-card[b-rjggj7v5bd] { text-decoration: none; color: inherit; cursor: pointer; }
.jt-link[b-rjggj7v5bd] { background: transparent; border: 0; color: #0c66e4; font-size: calc(13px * var(--fx-zoom, 1)); padding: 6px 0 0; cursor: pointer; }
.jt-link:hover[b-rjggj7v5bd] { text-decoration: underline; }

/* Export-to-Jira + Jira-connection dialogs (label / control rows). */
.jira-export[b-rjggj7v5bd] { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; min-width: 0; }
.je-row[b-rjggj7v5bd] { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; min-width: 0; }
.je-row-top[b-rjggj7v5bd] { align-items: start; }
.je-label[b-rjggj7v5bd] { font-size: calc(13px * var(--fx-zoom, 1)); color: #44546f; font-weight: 600; }
.je-board[b-rjggj7v5bd] { display: grid; grid-template-columns: 1fr 150px; gap: 10px; align-items: center; min-width: 0; }
.je-board-url[b-rjggj7v5bd] { font-size: calc(13px * var(--fx-zoom, 1)); color: #172b4d; background: #f1f2f4; border-radius: 6px; padding: 5px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.je-num[b-rjggj7v5bd] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.je-projkey[b-rjggj7v5bd] { font-size: calc(15px * var(--fx-zoom, 1)); font-weight: 700; color: #0c66e4; font-family: ui-monospace, "SFMono-Regular", monospace; }
.je-hint[b-rjggj7v5bd] { font-size: calc(11px * var(--fx-zoom, 1)); color: #8993a4; }
.je-testmsg[b-rjggj7v5bd] { font-size: calc(12px * var(--fx-zoom, 1)); color: #172b4d; }
.je-note[b-rjggj7v5bd] { font-size: calc(11px * var(--fx-zoom, 1)); color: #626f86; margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.je-note code[b-rjggj7v5bd] { background: #f1f2f4; padding: 1px 5px; border-radius: 4px; }
.jira-export[b-rjggj7v5bd]  input, .jira-export input[b-rjggj7v5bd],
.jira-export[b-rjggj7v5bd]  textarea, .jira-export textarea[b-rjggj7v5bd] { width: 100%; box-sizing: border-box; }
.jira-export input[type="password"][b-rjggj7v5bd] { border: 1px solid #dfe1e6; border-radius: 4px; padding: 5px 8px; font-size: calc(13px * var(--fx-zoom, 1)); color: #172b4d; }

/* Footer Export-to-Jira button + existing-key link. */
.btn-jira-export[b-rjggj7v5bd] { display: inline-flex; align-items: center; gap: 6px; background: #0c66e4; color: #fff; border: 1px solid #0c66e4; }
.btn-jira-export:hover[b-rjggj7v5bd] { background: #0a5ad1; color: #fff; border-color: #0a5ad1; }
/* "Save to Jira" / edit-Save — light surface so the colour Jira logo reads clearly. */
.btn-jira-save[b-rjggj7v5bd] { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #172b4d; border: 1px solid #c1c7d0; font-weight: 600; }
.btn-jira-save:hover[b-rjggj7v5bd] { background: #f4f8ff; color: #0c66e4; border-color: #0c66e4; }
.btn-jira-save:disabled[b-rjggj7v5bd] { opacity: .65; cursor: default; }
.jt-jira-ico[b-rjggj7v5bd] { display: inline-flex; align-items: center; }
.jt-jira-ico svg[b-rjggj7v5bd] { width: 15px; height: 15px; display: block; }
/* Unsaved-changes prompt body. */
.jt-unsaved-dialog[b-rjggj7v5bd] { padding: 6px 4px 2px; font-size: calc(14px * var(--fx-zoom, 1)); color: #172b4d; line-height: 1.5; }
.jt-jira-link[b-rjggj7v5bd] { display: inline-flex; align-items: center; gap: 4px; font-size: calc(12px * var(--fx-zoom, 1)); font-weight: 600; color: #0c66e4; text-decoration: none; padding: 0 6px; }
.jt-jira-link:hover[b-rjggj7v5bd] { text-decoration: underline; }
/* Spinner for the board "Sync from Jira" button while a pull is in progress. */
.fb-spin[b-rjggj7v5bd] { display: inline-block; animation: fb-spin-b-rjggj7v5bd 0.8s linear infinite; }
@keyframes fb-spin-b-rjggj7v5bd { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Toolbar chip shown while a Jira pull (auto or manual) is updating tickets — "Syncing tickets 12/40…". */
.fb-sync-status[b-rjggj7v5bd] { display: inline-flex; align-items: center; font-size: calc(12px * var(--fx-zoom, 1)); font-weight: 600; color: #0c66e4; background: #e9f2ff; border-radius: 3px; padding: 3px 8px; white-space: nowrap; }

/* Add-attachment action row (edit mode): Capture / Attach file / Paste image. The file button is a
   <label> wrapping a hidden <InputFile>, so the label click opens the OS picker (no JS). */
.jt-attach-actions[b-rjggj7v5bd] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
[b-rjggj7v5bd] .jt-attach-picker { display: inline-block; }
[b-rjggj7v5bd] .jt-attach-add {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    background: #f4f5f7; border: 1px solid #dfe1e6; border-radius: 6px; padding: 6px 12px;
    font-size: calc(13px * var(--fx-zoom, 1)); color: #172b4d; cursor: pointer;
}
[b-rjggj7v5bd] .jt-attach-add:hover { background: #ebecf0; border-color: #c1c7d0; }
[b-rjggj7v5bd] .jt-attach-add.is-recording { border-color: #b71c1c; background: #fff0f0; color: #8b0000; font-weight: 600; }
[b-rjggj7v5bd] .jt-record-dot { width: 8px; height: 8px; border-radius: 50%; background: #c62828; flex: 0 0 auto; }
[b-rjggj7v5bd] .jt-attach-add.is-recording .jt-record-dot { animation: jt-record-pulse-b-rjggj7v5bd 1.15s ease-in-out infinite; }
@keyframes jt-record-pulse-b-rjggj7v5bd { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.jt-attach-fileinput[b-rjggj7v5bd] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.jt-attach-fileinput[b-rjggj7v5bd]::file-selector-button { display: none; }

.jt-section-static .jt-muted[b-rjggj7v5bd] { font-size: calc(13px * var(--fx-zoom, 1)); color: #626f86; padding: 6px 8px; border: 1px dashed #dfe1e6; border-radius: 4px; }

/* ── Linked work items (HHM-216) — Jira-style issue links ─────────────────── */
.jt-link-group[b-rjggj7v5bd] { font-size: calc(12px * var(--fx-zoom, 1)); font-weight: 600; color: #626f86; margin: 8px 0 4px; }
.jt-link-row[b-rjggj7v5bd] { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.jt-link-card[b-rjggj7v5bd] {
    display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; text-align: left;
    background: #fff; border: 1px solid #dfe1e6; border-radius: 4px; padding: 7px 10px;
    cursor: pointer; font-size: calc(13px * var(--fx-zoom, 1)); color: #172b4d;
}
.jt-link-card:hover[b-rjggj7v5bd] { background: #f7f8f9; border-color: #c1c7d0; }
.jt-link-key[b-rjggj7v5bd] { color: #0c66e4; font-weight: 600; white-space: nowrap; }
.jt-link-sum[b-rjggj7v5bd] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-link-status[b-rjggj7v5bd] {
    flex: 0 0 auto; font-size: calc(11px * var(--fx-zoom, 1)); font-weight: 600; text-transform: uppercase;
    background: #f1f2f4; color: #44546f; border-radius: 3px; padding: 2px 6px; white-space: nowrap;
}
.jt-link-del[b-rjggj7v5bd] {
    flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid #dfe1e6; border-radius: 4px;
    background: #fff; color: #626f86; cursor: pointer; font-size: calc(12px * var(--fx-zoom, 1)); line-height: 1;
}
.jt-link-del:hover[b-rjggj7v5bd] { background: #ffedeb; color: #ae2e24; border-color: #f5cd47; }
.jt-link-add[b-rjggj7v5bd] { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.jt-link-add .jt-attach-add[disabled][b-rjggj7v5bd] { opacity: 0.5; cursor: default; }

.jt-diag summary[b-rjggj7v5bd] { color: #0c66e4; font-weight: 600; cursor: pointer; font-size: calc(13px * var(--fx-zoom, 1)); }
.jt-diag-body[b-rjggj7v5bd] {
    margin-top: 8px; padding: 10px; background: #0f172a; color: #f8fafc; border-radius: 4px;
    font-family: monospace; font-size: calc(11px * var(--fx-zoom, 1)); max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-all;
}

.jt-side-h[b-rjggj7v5bd] { font-size: calc(13px * var(--fx-zoom, 1)); font-weight: 600; color: #44546f; margin-bottom: 12px; }
.jt-field[b-rjggj7v5bd] { display: grid; grid-template-columns: 100px 1fr; gap: 8px; align-items: start; margin-bottom: 12px; font-size: calc(13px * var(--fx-zoom, 1)); }
.jt-flabel[b-rjggj7v5bd] { color: #626f86; }
.jt-fval[b-rjggj7v5bd] { color: #172b4d; min-width: 0; }
.jt-finput[b-rjggj7v5bd] { width: 100%; border: 1px solid #dfe1e6; border-radius: 4px; padding: 3px 6px; font-size: calc(13px * var(--fx-zoom, 1)); color: #172b4d; background: #fff; }
.jt-finput:focus[b-rjggj7v5bd] { border-color: #0c66e4; outline: none; box-shadow: 0 0 0 1px #0c66e4; }
.jt-fval[b-rjggj7v5bd]  .jt-editable-dd.fx-dropdown-host,
.jt-header-actions[b-rjggj7v5bd]  .jt-editable-dd.fx-dropdown-host {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: calc(13px * var(--fx-zoom, 1));
}
.jt-fval[b-rjggj7v5bd]  .jt-editable-dd.fx-dropdown,
.jt-header-actions[b-rjggj7v5bd]  .jt-editable-dd.fx-dropdown {
    min-height: 26px;
    height: 26px;
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    background: #fff;
    color: #172b4d;
    font-size: calc(13px * var(--fx-zoom, 1));
}
.jt-fval[b-rjggj7v5bd]  .jt-editable-dd.fx-dropdown:focus-within,
.jt-header-actions[b-rjggj7v5bd]  .jt-editable-dd.fx-dropdown:focus-within {
    outline: none;
    border-color: #0c66e4;
    box-shadow: 0 0 0 1px #0c66e4;
}
.jt-header-actions[b-rjggj7v5bd]  .jt-status-dd.fx-dropdown-host {
    width: 132px;
    flex-basis: 132px;
}
.jt-header-actions[b-rjggj7v5bd]  .jt-status-dd.fx-dropdown {
    background: #f1f2f4;
    font-weight: 600;
}
.jt-mono[b-rjggj7v5bd] { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: calc(12px * var(--fx-zoom, 1)); }
.jt-trunc[b-rjggj7v5bd] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-muted[b-rjggj7v5bd] { color: #626f86; }
.jt-avatar[b-rjggj7v5bd] {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 50%; background: #1c5fc4; color: #fff; font-size: calc(10px * var(--fx-zoom, 1)); font-weight: 700; margin-right: 4px; vertical-align: middle;
}
.jt-avatar-amber[b-rjggj7v5bd] { background: #d97706; }
.jt-avatar[b-rjggj7v5bd] { overflow: hidden; }                          /* clip the photo to the circle */
.jt-avatar-photo[b-rjggj7v5bd] { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.jt-avatar-ini[b-rjggj7v5bd] { line-height: 1; }
.jt-priority i[b-rjggj7v5bd] { font-size: calc(11px * var(--fx-zoom, 1)); }
.jt-priority-high i[b-rjggj7v5bd] { color: #c9372c; }
.jt-priority-medium i[b-rjggj7v5bd] { color: #e2780b; }
.jt-priority-low i[b-rjggj7v5bd] { color: #1f845a; }

.jt-footer[b-rjggj7v5bd] {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    border-top: 1px solid #ebecf0; background: #fafbfc; flex: 0 0 auto; flex-wrap: wrap;
}
.jt-spring[b-rjggj7v5bd] { flex: 1 1 auto; }
.jt-footer .download-label[b-rjggj7v5bd] { font-size: calc(12px * var(--fx-zoom, 1)); color: #626f86; font-weight: 600; }

.jt-zoom-overlay[b-rjggj7v5bd] {
    position: fixed; inset: 0; z-index: 100000; background: rgba(9,30,66,0.72);
    display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 24px;
}
.jt-zoom-img[b-rjggj7v5bd] { max-width: 96vw; max-height: 92vh; box-shadow: 0 12px 40px rgba(0,0,0,.5); background: #fff; }

/* Breadcrumb back-button in the ticket header. */
.jt-crumb-btn[b-rjggj7v5bd] { background: transparent; border: 0; color: #0c66e4; font: inherit; font-size: calc(13px * var(--fx-zoom, 1)); cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 5px; }
.jt-crumb-btn:hover[b-rjggj7v5bd] { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────────
   Feedback HOME BOARD — Jira-style board of ticket cards grouped into category boxes.
   ───────────────────────────────────────────────────────────────────────────── */
/* height:100% fills the host slot (.main-content) — NOT a 2nd 100vh calc, which over-sized the board so its
   bottom (the kanban's horizontal scrollbar) was pushed below the fold when the board was tall. */
.fb-home[b-rjggj7v5bd] { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #fff; color: #172b4d;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif; border: 1px solid #dfe1e6; }
/* Owner directive 2026-07-29: two-row header. Row 1 (fb-home-bar-top) = title + all
   FILTERS in the space right of "Feedback & Testing"; Row 2 (fb-home-bar-actions) =
   current user / Group by / Create / Capture / sync / gear. Both rows still wrap on
   narrow screens so nothing clips off the right edge. */
.fb-home-bar[b-rjggj7v5bd] { display: flex; align-items: center; gap: 12px; padding: 8px 18px; flex: 0 0 auto; flex-wrap: wrap; }
.fb-home-bar-top[b-rjggj7v5bd] { padding-top: 12px; border-bottom: 0; }
.fb-home-bar-actions[b-rjggj7v5bd] { padding-top: 0; padding-bottom: 10px; border-bottom: 1px solid #ebecf0; }
.fb-home-title[b-rjggj7v5bd] { font-size: calc(18px * var(--fx-zoom, 1)); font-weight: 700; margin: 0; color: #172b4d; display: flex; align-items: center; gap: 8px; }
.fb-home-filters[b-rjggj7v5bd] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: 6px; }
.fb-home-actions[b-rjggj7v5bd] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fb-filter[b-rjggj7v5bd] { flex: 0 0 auto; }

/* ── Jira-style filter popover ──────────────────────────────────────────────
   Trigger + count badge live in the top bar. The panel is ButtonControl's
   DropDownContent popup. Anything ButtonControl / TabStripControl /
   DropDownListControl / TextBoxControl renders carries THEIR scope id, so it
   is reached with ::deep from a page-scoped ancestor; everything authored
   inside the DropDownContent fragment is page-scoped and styled plainly.
   No overflow/max-height anywhere on the panel or the rule list: the nested
   value/field/operator popups are position:absolute and a scrolling ancestor
   would clip them — the row count is capped at MaxFilterRules instead. */
.fb-home-filters[b-rjggj7v5bd]  .fb-filter-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px;
    background: #f4f5f7; color: #42526e;
    border: 1px solid transparent; border-radius: 4px;
    font-size: calc(13px * var(--fx-zoom, 1)); font-weight: 600; font-family: inherit; cursor: pointer;
    transition: background-color .1s ease;
}
.fb-home-filters[b-rjggj7v5bd]  .fb-filter-trigger:hover { background: #ebecf0; color: #0c66e4; }
.fb-home-filters[b-rjggj7v5bd]  .fb-filter-trigger-on { background: #e9f2ff; color: #0c66e4; border-color: #cfe0fc; }
.fb-filter-lbl[b-rjggj7v5bd] { line-height: 1; }
.fb-filter-count[b-rjggj7v5bd] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #0c66e4; color: #fff; border-radius: 9px;
    font-size: calc(11px * var(--fx-zoom, 1)); font-weight: 700; line-height: 1;
}

.fb-home-filters[b-rjggj7v5bd]  .fb-filter-panel {
    width: 660px;
    padding: 0;
    background: #fff;
    border: 1px solid #dfe1e6;
    border-radius: 6px;
    box-shadow: 0 8px 16px -4px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.31);
}

.fb-fp[b-rjggj7v5bd] { display: flex; flex-direction: column; font-size: calc(13px * var(--fx-zoom, 1)); color: #172b4d; }
.fb-fp-head[b-rjggj7v5bd] {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    padding: 8px 12px 0; border-bottom: 1px solid #ebecf0;
}
.fb-fp-views[b-rjggj7v5bd] { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }

/* Basic | Advanced | JQL — TabStripControl reskinned into Jira's segmented row. */
.fb-fp-head[b-rjggj7v5bd]  .fb-fp-tabs { background: transparent; border-bottom: 0; gap: 2px; overflow: visible; }
.fb-fp-head[b-rjggj7v5bd]  .fb-fp-tabs .fx-tabstrip-tab {
    padding: 6px 14px; border-bottom: 2px solid transparent; border-radius: 3px 3px 0 0;
    font-size: calc(13px * var(--fx-zoom, 1)); font-weight: 600; color: #626f86;
}
.fb-fp-head[b-rjggj7v5bd]  .fb-fp-tabs .fx-tabstrip-tab:hover { background: #f4f5f7; color: #172b4d; }
.fb-fp-head[b-rjggj7v5bd]  .fb-fp-tabs .fx-tabstrip-tab-active {
    color: #0c66e4; border-bottom-color: #0c66e4; background: transparent;
}

.fb-fp-basic[b-rjggj7v5bd] { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 12px; }

.fb-fp-rules[b-rjggj7v5bd] { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; }
.fb-fp-row[b-rjggj7v5bd] { display: flex; align-items: center; gap: 8px; }
.fb-fp-empty[b-rjggj7v5bd] { color: #626f86; font-style: italic; padding: 2px 0 4px; }
.fb-fp-noval[b-rjggj7v5bd] { flex: 1 1 auto; }

.fb-fp-jql[b-rjggj7v5bd] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 12px; }
.fb-fp-jqlbox[b-rjggj7v5bd] { flex: 1 1 280px; padding-left: 9px; min-width: 0; }
.fb-fp-jqlnote[b-rjggj7v5bd] { flex: 1 1 100%; font-size: calc(12px * var(--fx-zoom, 1)); color: #626f86; }

.fb-fp-foot[b-rjggj7v5bd] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-top: 1px solid #ebecf0;
    background: #fafbfc; border-radius: 0 0 6px 6px;
}

/* FlexKit-rendered buttons inside the panel — all use BareStyle, so these rules
   are the ONLY skin they get. */
.fb-fp-views[b-rjggj7v5bd]  .fb-fp-btn,
.fb-fp-jql[b-rjggj7v5bd]  .fb-fp-btn {
    height: 30px; padding: 0 12px;
    background: #fff; color: #172b4d;
    border: 1px solid #c1c7d0; border-radius: 4px;
    font-size: calc(13px * var(--fx-zoom, 1)); font-weight: 600; font-family: inherit; cursor: pointer;
}
.fb-fp-views[b-rjggj7v5bd]  .fb-fp-btn:hover,
.fb-fp-jql[b-rjggj7v5bd]  .fb-fp-btn:hover { background: #f4f8ff; color: #0c66e4; border-color: #0c66e4; }

.fb-fp-row[b-rjggj7v5bd]  .fb-fp-x {
    flex: 0 0 auto; margin-left: auto;
    width: 26px; height: 26px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #626f86; border: 0; border-radius: 3px; cursor: pointer;
}
.fb-fp-row[b-rjggj7v5bd]  .fb-fp-x:hover { background: #ebecf0; color: #172b4d; }

.fb-fp-foot[b-rjggj7v5bd]  .fb-fp-add,
.fb-fp-foot[b-rjggj7v5bd]  .fb-fp-clear {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px; background: transparent; border: 0; border-radius: 3px;
    font-size: calc(13px * var(--fx-zoom, 1)); font-weight: 600; font-family: inherit; color: #0c66e4; cursor: pointer;
}
.fb-fp-foot[b-rjggj7v5bd]  .fb-fp-add:hover,
.fb-fp-foot[b-rjggj7v5bd]  .fb-fp-clear:hover { background: #e9f2ff; }
.fb-fp-foot[b-rjggj7v5bd]  .fb-fp-add:disabled { color: #a5adba; background: transparent; cursor: default; }
.fb-fp-foot[b-rjggj7v5bd]  .fb-fp-clear { color: #626f86; }
.fb-fp-foot[b-rjggj7v5bd]  .fb-fp-clear:hover { background: #ebecf0; color: #172b4d; }

/* Field / operator / saved-view dropdowns and the text value box — match the
   fb-* height and palette (FlexKit's defaults are the VB6 grey skin). */
.fb-fp-row[b-rjggj7v5bd]  .fb-fp-dd.fx-dropdown,
.fb-fp-views[b-rjggj7v5bd]  .fb-fp-viewdd.fx-dropdown {
    min-height: 30px; height: 30px;
    border: 1px solid #c1c7d0; border-radius: 4px;
    background: #fff; color: #172b4d; font-size: calc(13px * var(--fx-zoom, 1)); font-family: inherit;
}
.fb-fp-row[b-rjggj7v5bd]  .fb-fp-dd.fx-dropdown:focus,
.fb-fp-views[b-rjggj7v5bd]  .fb-fp-viewdd.fx-dropdown:focus {
    outline: none; border-color: #0c66e4; box-shadow: 0 0 0 1px #0c66e4;
}
.fb-fp-row[b-rjggj7v5bd]  .fb-fp-txt {
    flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 9px;
    border: 1px solid #c1c7d0; border-radius: 4px;
    font-size: calc(13px * var(--fx-zoom, 1)); font-family: inherit; color: #172b4d;
}
.fb-fp-row[b-rjggj7v5bd]  .fb-fp-txt:focus { outline: none; border-color: #0c66e4; box-shadow: 0 0 0 1px #0c66e4; }
.fb-fp-row[b-rjggj7v5bd]  .fb-fp-val { flex: 0 0 auto; }

/* Jira-style Search Box Wrapper */
.fb-search-container[b-rjggj7v5bd] {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.fb-search-icon[b-rjggj7v5bd] {
    position: absolute;
    left: 10px;
    color: #626f86;
    pointer-events: none;
    font-size: calc(13px * var(--fx-zoom, 1));
}
.fb-search[b-rjggj7v5bd] {
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    padding: 5px 9px 5px 30px;
    font-size: calc(13px * var(--fx-zoom, 1));
    min-width: 220px;
    color: #172b4d;
    height: 32px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fb-search:hover[b-rjggj7v5bd] {
    background-color: #f4f5f7;
}
.fb-search:focus[b-rjggj7v5bd] {
    background-color: #ffffff;
    border-color: #0c66e4;
    outline: none;
    box-shadow: 0 0 0 1px #0c66e4;
}

.fb-groupby-lbl[b-rjggj7v5bd] {
    font-size: calc(12px * var(--fx-zoom, 1));
    color: #626f86;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Sync-scope label filter beside the Sync button (owner 2026-09-04). */
.fb-home-actions[b-rjggj7v5bd]  .fb-synclabel {
    width: calc(110px * var(--fx-zoom, 1));
    height: calc(30px * var(--fx-zoom, 1));
    font-size: calc(13px * var(--fx-zoom, 1));
    border: 1px solid #8590a2;
    border-radius: 3px;
    padding: 0 8px;
}
.fb-synclabel-clear[b-rjggj7v5bd] {
    padding: 2px 9px;
    font-size: calc(15px * var(--fx-zoom, 1));
    line-height: 1;
}
.fb-home-actions[b-rjggj7v5bd]  .fb-groupby.fx-dropdown-host {
    width: 150px;
    min-width: 150px;
    flex: 0 0 150px;
    font-family: inherit;
    font-size: calc(13px * var(--fx-zoom, 1));
}
.fb-home-actions[b-rjggj7v5bd]  .fb-groupby.fx-dropdown {
    min-height: 32px;
    height: 32px;
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    background: #fff;
    color: #172b4d;
    font-size: calc(13px * var(--fx-zoom, 1));
}
.fb-home-actions[b-rjggj7v5bd]  .fb-groupby.fx-dropdown:focus {
    outline: none;
    border-color: #0c66e4;
    box-shadow: 0 0 0 1px #0c66e4;
}

/* "Current user" selector — who is using the board (comment author + default Reporter) */
.fb-currentuser[b-rjggj7v5bd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 10px;
    background: #eef4ff;
    border: 1px solid #cfe0fc;
    border-radius: 16px;
}
.fb-currentuser-lbl[b-rjggj7v5bd] {
    font-size: calc(12px * var(--fx-zoom, 1));
    color: #44546f;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.fb-currentuser-lbl i[b-rjggj7v5bd] { color: #0c66e4; font-size: calc(14px * var(--fx-zoom, 1)); }
.fb-home-actions[b-rjggj7v5bd]  .fb-currentuser-dd.fx-dropdown-host {
    width: 170px;
    min-width: 170px;
    flex: 0 0 170px;
    font-family: inherit;
    font-size: calc(13px * var(--fx-zoom, 1));
}
.fb-home-actions[b-rjggj7v5bd]  .fb-currentuser-dd.fx-dropdown,
.fb-home-actions[b-rjggj7v5bd]  .fb-currentuser-dd .fx-dropdown {
    min-height: 30px;
    height: 30px;
    border: 1px solid #cfe0fc;
    border-radius: 4px;
    background: #fff;
    color: #172b4d;
    font-size: calc(13px * var(--fx-zoom, 1));
}

/* Jira primary Blue button styling */
.btn-jira-create[b-rjggj7v5bd] {
    background-color: #0c66e4;
    color: #ffffff;
    font-weight: 600;
    font-size: calc(13px * var(--fx-zoom, 1));
    padding: 5px 14px;
    border: none;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    height: 32px;
}
.btn-jira-create:hover[b-rjggj7v5bd] {
    background-color: #0052cc;
    color: #ffffff;
}
.btn-jira-create:active[b-rjggj7v5bd] {
    background-color: #0747a6;
}

/* Jira secondary button styling */
.btn-jira-secondary[b-rjggj7v5bd] {
    background-color: #f4f5f7;
    color: #42526e;
    font-weight: 600;
    font-size: calc(13px * var(--fx-zoom, 1));
    padding: 5px 14px;
    border: none;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    height: 32px;
}
.btn-jira-secondary:hover[b-rjggj7v5bd] {
    background-color: #ebecf0;
    color: #0c66e4;
}
.btn-jira-secondary:active[b-rjggj7v5bd] {
    background-color: #dfe1e6;
}

.fb-board[b-rjggj7v5bd] { flex: 1 1 auto; overflow: auto; display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; }

/* Kanban board host — fills the area the old card-board used (the FlexKit control inside is height:100%). */
.fb-kanban-wrap[b-rjggj7v5bd] { flex: 1 1 auto; min-height: 0; display: flex; padding: 14px 18px; }

/* Jira-style comment thread on the ticket screen. */
.jt-comments[b-rjggj7v5bd] { margin-top: 4px; }
.jt-comment[b-rjggj7v5bd] { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f1f3; }
.jt-comment-body[b-rjggj7v5bd] { flex: 1 1 auto; min-width: 0; }
.jt-comment-head[b-rjggj7v5bd] { display: flex; align-items: baseline; gap: 8px; }
.jt-comment-author[b-rjggj7v5bd] { font-weight: 600; font-size: calc(13px * var(--fx-zoom, 1)); color: #172b4d; }
.jt-comment-date[b-rjggj7v5bd] { font-size: calc(11px * var(--fx-zoom, 1)); color: #626f86; }
.jt-comment-text[b-rjggj7v5bd] { font-size: calc(13px * var(--fx-zoom, 1)); color: #172b4d; white-space: pre-wrap; margin-top: 2px; }
.jt-comment-add[b-rjggj7v5bd] { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 560px; }
.jt-comment-add .jt-comment-input[b-rjggj7v5bd] { width: 100%; }
/* Comment edit/delete (HHM-148). */
/* Comment Edit/Delete actions were hover-only (opacity:0) — users couldn't find
   the Delete option. Always visible now (dimmed at rest, full on hover). */
.jt-comment-actions[b-rjggj7v5bd] { margin-left: auto; display: inline-flex; gap: 4px; opacity: .65; transition: opacity .1s; }
.jt-comment:hover .jt-comment-actions[b-rjggj7v5bd] { opacity: 1; }
.jt-comment-act[b-rjggj7v5bd] { border: none; background: transparent; color: #626f86; cursor: pointer; padding: 2px 4px; font-size: calc(12px * var(--fx-zoom, 1)); border-radius: 3px; }
.jt-comment-act:hover[b-rjggj7v5bd] { background: #f0f1f3; color: #172b4d; }
.jt-comment-edit[b-rjggj7v5bd] { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; max-width: 560px; }
.jt-comment-edit .jt-comment-input[b-rjggj7v5bd] { width: 100%; }
.jt-comment-edit-actions[b-rjggj7v5bd] { display: flex; gap: 8px; }
.jt-comment-btn-sec[b-rjggj7v5bd] { background: #f0f1f3 !important; color: #172b4d !important; }
/* Activity / history (HHM-147). */
.jt-activity .jt-section-h[b-rjggj7v5bd] { display: flex; align-items: center; gap: 10px; }
.jt-activity-refresh[b-rjggj7v5bd] { border: 1px solid #dfe1e6; background: #fff; color: #42526e; border-radius: 4px; font-size: calc(12px * var(--fx-zoom, 1)); padding: 2px 8px; cursor: pointer; }
.jt-activity-refresh:hover:not(:disabled)[b-rjggj7v5bd] { background: #f4f5f7; }
.jt-activity-refresh:disabled[b-rjggj7v5bd] { opacity: .6; cursor: default; }
.jt-activity-list[b-rjggj7v5bd] { display: flex; flex-direction: column; }
.jt-activity-row[b-rjggj7v5bd] { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #f0f1f3; font-size: calc(13px * var(--fx-zoom, 1)); color: #172b4d; }
.jt-activity-author[b-rjggj7v5bd] { font-weight: 600; }
.jt-activity-txt[b-rjggj7v5bd] { color: #42526e; }
.jt-activity-date[b-rjggj7v5bd] { margin-left: auto; font-size: calc(11px * var(--fx-zoom, 1)); color: #626f86; }

/* "Close issue" dialog (drag to Done) */
.jt-close-dialog[b-rjggj7v5bd] { display: flex; flex-direction: column; gap: 14px; padding: 6px 4px 2px; }
.jt-close-field[b-rjggj7v5bd] { display: flex; flex-direction: column; gap: 5px; }
.jt-close-label[b-rjggj7v5bd] { font-size: calc(12px * var(--fx-zoom, 1)); font-weight: 600; color: #44546f; }
.jt-close-dialog .jt-close-comment[b-rjggj7v5bd] { width: 100%; }
.fb-col[b-rjggj7v5bd] { flex: 0 0 290px; max-width: 290px; background: #f7f8f9; border-radius: 8px; display: flex; flex-direction: column; max-height: 100%; border: 1px solid #dfe1e6; }
.fb-col-h[b-rjggj7v5bd] { display: flex; align-items: center; padding: 12px 14px; font-size: calc(13px * var(--fx-zoom, 1)); font-weight: 600; color: #626f86; text-transform: uppercase; letter-spacing: .05em; position: sticky; top: 0; }
.fb-col-name[b-rjggj7v5bd] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-col-count[b-rjggj7v5bd] { margin-left: auto; background: #ebecf0; color: #44546f; border-radius: 12px; padding: 2px 8px; font-size: calc(11px * var(--fx-zoom, 1)); font-weight: 600; }
.fb-col-cards[b-rjggj7v5bd] { padding: 0 8px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }

/* Premium Jira Cards layout */
.fb-card[b-rjggj7v5bd] {
    background: #fff;
    border: 1px solid #dfe1e6;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(9,30,66,.08);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fb-card:hover[b-rjggj7v5bd] {
    transform: translateY(-2px);
    border-color: #0c66e4;
    box-shadow: 0 4px 8px rgba(9,30,66,.12);
}
.fb-card-topic[b-rjggj7v5bd] {
    font-size: calc(14px * var(--fx-zoom, 1));
    font-weight: 500;
    color: #172b4d;
    line-height: 1.4;
    word-wrap: break-word;
    margin: 0;
}
.fb-card-thumbwrap[b-rjggj7v5bd] {
    height: 96px;
    background: #f4f5f7;
    border: 1px solid #ebecf0;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fb-card-thumb[b-rjggj7v5bd] { max-width: 100%; max-height: 96px; object-fit: contain; }

.fb-card-bottom[b-rjggj7v5bd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}
.fb-card-bottom-left[b-rjggj7v5bd] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fb-card-bottom-right[b-rjggj7v5bd] {
    display: flex;
    align-items: center;
    gap: 6px;
}
.fb-card-key-link[b-rjggj7v5bd] {
    font-size: calc(12px * var(--fx-zoom, 1));
    font-weight: 600;
    color: #626f86;
}
.fb-card-date[b-rjggj7v5bd] {
    font-size: calc(11px * var(--fx-zoom, 1));
    color: #626f86;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.fb-card-type-icon[b-rjggj7v5bd] {
    font-size: calc(14px * var(--fx-zoom, 1));
    display: inline-flex;
    align-items: center;
}
.fb-card-priority[b-rjggj7v5bd] {
    font-size: calc(14px * var(--fx-zoom, 1));
    display: inline-flex;
    align-items: center;
}

.fb-card-del[b-rjggj7v5bd] {
    background: transparent;
    border: none;
    color: #626f86;
    cursor: pointer;
    font-size: calc(13px * var(--fx-zoom, 1));
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.fb-card:hover .fb-card-del[b-rjggj7v5bd] {
    opacity: 1;
}
.fb-card-del:hover[b-rjggj7v5bd] {
    color: #de350b;
    background: #ffeceb;
}

.fb-board-empty[b-rjggj7v5bd] { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #626f86; gap: 8px; }
.fb-board-empty i[b-rjggj7v5bd] { font-size: calc(40px * var(--fx-zoom, 1)); color: #c1c7d0; }

/* ── Extended Jira bug-ticket fields ─────────────────────────────────────────── */
/* Full-width text input (Environment line in the main column). */
.jt-input-full[b-rjggj7v5bd] {
    width: 100%; border: 1px solid #dfe1e6; border-radius: 4px; padding: 6px 9px;
    font-size: calc(13px * var(--fx-zoom, 1)); color: #172b4d; background: #fff; font-family: inherit;
}
.jt-input-full:focus[b-rjggj7v5bd] { border-color: #0c66e4; outline: none; box-shadow: 0 0 0 1px #0c66e4; }

/* Sidebar sub-header (e.g. "Migration context"). */
.jt-side-sub[b-rjggj7v5bd] {
    margin: 14px 0 10px; padding-top: 12px; border-top: 1px solid #ebecf0;
    font-size: calc(12px * var(--fx-zoom, 1)); font-weight: 700; color: #44546f; text-transform: uppercase; letter-spacing: .03em;
}

/* Issue-type badge — coloured pill per defect type. */
.jt-issuetype[b-rjggj7v5bd] {
    display: inline-block; font-size: calc(11px * var(--fx-zoom, 1)); font-weight: 600; padding: 1px 8px; border-radius: 3px;
    background: #e9ecf0; color: #44546f; white-space: nowrap;
}
.jt-it-bug[b-rjggj7v5bd] { background: #ffeceb; color: #ae2a19; }
.jt-it-feature-request[b-rjggj7v5bd] { background: #e9f2ff; color: #0c66e4; }
.jt-it-enhancement[b-rjggj7v5bd] { background: #e3fcef; color: #216e4e; }
.jt-it-migration-gap[b-rjggj7v5bd] { background: #fff3d6; color: #974f0c; }
.jt-it-vb6-incompatibility[b-rjggj7v5bd] { background: #f3e8ff; color: #6e3bb3; }
.jt-it-question[b-rjggj7v5bd] { background: #e6fcff; color: #1d7f8c; }

/* Label chips (comma-separated Labels, read mode). */
.jt-label-chip[b-rjggj7v5bd] {
    display: inline-block; font-size: calc(11px * var(--fx-zoom, 1)); background: #dfe1e6; color: #44546f;
    border-radius: 3px; padding: 1px 7px; margin: 0 4px 4px 0;
}

/* Card top-left group so the issue-type badge sits next to the key, delete stays right. */
.fb-card-keys[b-rjggj7v5bd] { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }

/* "Save as" download buttons — square icon buttons with a centred inline-SVG. */
.fb-dl-btn[b-rjggj7v5bd] { display: inline-flex; align-items: center; justify-content: center; padding: 3px 7px; position: relative; }
.fb-dl-btn svg[b-rjggj7v5bd] { display: block; }
.download-label svg[b-rjggj7v5bd] { vertical-align: -2px; margin-right: 2px; }

/* Immediate CSS tooltip (no JS) for the icon-only download buttons — reads data-tip. */
.fb-dl-btn[b-rjggj7v5bd]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
    background: #172b4d; color: #fff; font: 500 calc(11px * var(--fx-zoom, 1))/1.4 -apple-system, "Segoe UI", sans-serif;
    white-space: nowrap; padding: 3px 8px; border-radius: 4px;
    opacity: 0; pointer-events: none; transition: opacity .1s ease; z-index: 60;
    box-shadow: 0 4px 10px rgba(9,30,66,.28);
}
.fb-dl-btn[b-rjggj7v5bd]::before {
    content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #172b4d;
    opacity: 0; pointer-events: none; transition: opacity .1s ease; z-index: 60;
}
.fb-dl-btn:hover[b-rjggj7v5bd]::after, .fb-dl-btn:focus-visible[b-rjggj7v5bd]::after,
.fb-dl-btn:hover[b-rjggj7v5bd]::before, .fb-dl-btn:focus-visible[b-rjggj7v5bd]::before { opacity: 1; }

/* The feedback tool is deliberately Jira-styled — exempt its buttons from the app-wide
   VB6 grey (app.css restyles .btn-primary/.btn-secondary for the migrated forms). */
.feedback-screen-container .btn-primary[b-rjggj7v5bd] {
    color: #fff;
    background-color: #0c66e4;
    border: 1px solid #0c66e4;
    border-radius: 4px;
    outline: none;
}
.feedback-screen-container .btn-primary:hover[b-rjggj7v5bd] { background-color: #0a5ad1; border-color: #0a5ad1; color: #fff; }
.feedback-screen-container .btn-secondary[b-rjggj7v5bd] {
    color: #172b4d;
    background-color: #fff;
    border: 1px solid #c1c7d0;
    border-radius: 4px;
    outline: none;
}
.feedback-screen-container .btn-secondary:hover[b-rjggj7v5bd] { background-color: #f4f5f7; }

/* HHM-863: inline video — the recording attached to a ticket plays in place
   (Jira's own markup for a video attachment is a dead QuickTime <object>). */
.jt-desc-video[b-rjggj7v5bd] {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 8px 0;
    border: 1px solid #dfe1e6;
    border-radius: 3px;
    background: #000;
}

.jt-attach-card-video[b-rjggj7v5bd] {
    cursor: default;
}

.jt-attach-video[b-rjggj7v5bd] {
    display: block;
    width: 100%;
    max-height: 260px;
    background: #000;
    border-radius: 3px 3px 0 0;
}
/* /Components/Pages/FJobDetail.razor.rz.scp.css */
.job-page[b-bes34xhtve] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100vh;
    padding: 8px 12px;
    box-sizing: border-box;
    background: #f8fafc;
    overflow: hidden;
}

.job-header[b-bes34xhtve] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.job-header-title[b-bes34xhtve] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.job-header-title h2[b-bes34xhtve] {
    margin: 0;
    font-size: 1.1rem;
}

.job-header-actions[b-bes34xhtve] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.job-created[b-bes34xhtve] {
    font-size: 0.78rem;
    color: #64748b;
}

.job-missing[b-bes34xhtve] {
    color: #64748b;
    padding: 12px 0;
}

.job-banner[b-bes34xhtve] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.82rem;
}

.job-banner-recovered[b-bes34xhtve] { background: #fef3c7; border: 1px solid #fcd34d; }
.job-banner-gates[b-bes34xhtve] { background: #fee2e2; border: 1px solid #fca5a5; }

.job-budgets[b-bes34xhtve] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

[b-bes34xhtve] .job-budget { font-size: 0.78rem; }

[b-bes34xhtve] .job-tabs { flex: 1; min-height: 0; }

.job-tab-actions[b-bes34xhtve] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    flex-wrap: wrap;
}

.job-selected[b-bes34xhtve], .job-log-count[b-bes34xhtve], .job-live-note[b-bes34xhtve], .job-repo[b-bes34xhtve] {
    font-size: 0.78rem;
    color: #475569;
}

.job-gate-open[b-bes34xhtve] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    margin: 4px 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.82rem;
}

.job-gate-title[b-bes34xhtve] { font-weight: 600; }
.job-gate-meta[b-bes34xhtve] { color: #64748b; flex: 1; }

[b-bes34xhtve] .job-row-btn {
    font-size: 0.72rem;
    padding: 1px 8px;
    margin-right: 4px;
}

[b-bes34xhtve] .job-log-data {
    width: 100%;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    margin-top: 6px;
}

.job-inspect[b-bes34xhtve], .job-output[b-bes34xhtve] {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.74rem;
    background: #1e293b;
    color: #e2e8f0;
    padding: 8px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 520px;
    overflow: auto;
}

.job-messages[b-bes34xhtve] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: calc(100vh - 470px);
    overflow: auto;
    padding: 6px 0;
}

.job-message[b-bes34xhtve] {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 8px;
}

.job-message-user[b-bes34xhtve] { background: #f8fafc; }
.job-message-assistant[b-bes34xhtve] { background: #ecfdf5; border-color: #a7f3d0; }

.job-message-meta[b-bes34xhtve] {
    font-size: 0.74rem;
    color: #64748b;
    margin-bottom: 2px;
}

.job-message-body[b-bes34xhtve] {
    margin: 0;
    font-family: inherit;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.job-ask[b-bes34xhtve] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 0;
}

[b-bes34xhtve] .job-question { flex: 1; }

[b-bes34xhtve] .job-config-grid { font-size: 0.8rem; }

.job-config-value[b-bes34xhtve] {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.74rem;
    word-break: break-all;
}

h4[b-bes34xhtve] {
    margin: 8px 0 4px;
    font-size: 0.85rem;
}
/* /Components/Pages/FJobs.razor.rz.scp.css */
.jobs-page[b-sykslc85h6] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 8px 12px;
    box-sizing: border-box;
    gap: 8px;
    background: #f8fafc;
}

.jobs-filter-label[b-sykslc85h6] {
    font-size: 0.8rem;
    color: #475569;
    margin: 0 4px 0 12px;
}

.jobs-steps[b-sykslc85h6] {
    font-variant-numeric: tabular-nums;
}

[b-sykslc85h6] .jobs-usage {
    margin: 0;
    font-size: 0.72rem;
}

[b-sykslc85h6] .jobs-usage .fx-progress-detail {
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Pages/FMigrationWizard.razor.rz.scp.css */
.migration-workflow[b-0nxzdkmdjh] { max-width: 1280px; margin: 0 auto; padding: 28px 32px 48px; color: #243448; background: #f6f8fb; min-height: 100vh; }
.workflow-heading[b-0nxzdkmdjh] { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 28px; }
.workflow-eyebrow[b-0nxzdkmdjh] { color: #486682; font-size: 11px; letter-spacing: .13em; font-weight: 700; }
h1[b-0nxzdkmdjh] { font-size: 30px; margin: 8px 0; letter-spacing: -.025em; }
h3[b-0nxzdkmdjh] { font-size: 17px; margin: 20px 0 12px; }
p[b-0nxzdkmdjh] { line-height: 1.6; overflow-wrap: anywhere; }
.workflow-heading p[b-0nxzdkmdjh] { margin: 0; color: #5c6b7c; }
.workflow-source-grid[b-0nxzdkmdjh] { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.workflow-source-grid section[b-0nxzdkmdjh] { min-width: 0; }
label[b-0nxzdkmdjh] { display: block; margin: 16px 0 7px; font-weight: 600; font-size: 13px; }
.workflow-actions[b-0nxzdkmdjh] { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 22px 0; }
.workflow-actions a[b-0nxzdkmdjh] { color: #1b5c91; }
.workflow-metrics[b-0nxzdkmdjh] { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 16px; margin: 12px 0 24px; }
.workflow-metrics > div[b-0nxzdkmdjh] { display: flex; flex-direction: column; gap: 5px; background: #edf3fa; border: 1px solid #d7e3f0; border-radius: 8px; padding: 20px; }
.workflow-metrics strong[b-0nxzdkmdjh] { font-size: 29px; color: #234f79; }
.workflow-metrics span[b-0nxzdkmdjh] { font-size: 13px; color: #5c6b7c; }
.workflow-plan-step[b-0nxzdkmdjh] { border-bottom: 1px solid #e0e5ec; padding-bottom: 12px; }
.workflow-plan-step h3 span[b-0nxzdkmdjh] { font-size: 12px; color: #5c6b7c; margin-left: 12px; font-weight: normal; }
.workflow-task[b-0nxzdkmdjh] { font-family: monospace; font-size: 12px; margin: 4px 0; }
.workflow-pipeline-step[b-0nxzdkmdjh] { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid #e0e5ec; }
.workflow-pipeline-step strong[b-0nxzdkmdjh] { min-width: 135px; }
.workflow-pipeline-step > p[b-0nxzdkmdjh] { flex-basis: 100%; margin: 4px 0; }
.workflow-error[b-0nxzdkmdjh] { background: #fff0ef; border-left: 3px solid #c24339; padding: 12px 16px; color: #982f2a; }
.workflow-finding[b-0nxzdkmdjh] { background: #fff7e7; padding: 12px 16px; border-radius: 6px; }
.workflow-note[b-0nxzdkmdjh], .workflow-reference[b-0nxzdkmdjh] { color: #5c6b7c; font-size: 13px; }
.workflow-reference[b-0nxzdkmdjh] { margin-top: 22px; }
pre[b-0nxzdkmdjh] { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
code[b-0nxzdkmdjh] { overflow-wrap: anywhere; }
.migration-workflow[b-0nxzdkmdjh]  .fx-wizard-inline { margin-top: 24px; border: 1px solid #dae2ec; border-radius: 10px; overflow: visible; background: #fff; }
.migration-workflow[b-0nxzdkmdjh]  .fx-wizard-body { padding: 24px; overflow: visible; }
.migration-workflow[b-0nxzdkmdjh]  .fx-wizard-header { padding: 22px 24px; background: #edf3fa; border-radius: 10px 10px 0 0; }
.migration-workflow[b-0nxzdkmdjh]  .fx-stepper { flex-wrap: wrap; }
.migration-workflow[b-0nxzdkmdjh]  .fx-stepper [aria-current="step"] { background: #244e76; color: white; }
@media (max-width: 760px) { .migration-workflow[b-0nxzdkmdjh] { padding: 20px 14px; } .workflow-heading[b-0nxzdkmdjh] { display: block; } .workflow-source-grid[b-0nxzdkmdjh] { grid-template-columns: 1fr; gap: 12px; } }
/* /Components/Pages/FTicketFixBatch.razor.rz.scp.css */
.tfb-page[b-luawx3n4hv] {
    height: 100vh;
    overflow: auto;
    padding: 12px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 13px;
}
.tfb-toolbar[b-luawx3n4hv] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.tfb-scope[b-luawx3n4hv] { font-size: 12px; color: #555; margin-bottom: 8px; }
.tfb-progress[b-luawx3n4hv] { font-style: italic; color: #0c66e4; }
.tfb-exclude[b-luawx3n4hv] { min-width: 360px; }

.btn-jira-save[b-luawx3n4hv] { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #172b4d; border: 1px solid #c1c7d0; font-weight: 600; }
.btn-jira-save:hover[b-luawx3n4hv] { background: #f4f8ff; color: #0c66e4; border-color: #0c66e4; }
.btn-jira-save:disabled[b-luawx3n4hv] { opacity: .65; cursor: default; }

.btn-jira-secondary[b-luawx3n4hv] {
    background-color: #f4f5f7;
    color: #42526e;
    font-weight: 600;
    font-size: calc(13px * var(--fx-zoom, 1));
    padding: 5px 14px;
    border: none;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    height: 32px;
}
.btn-jira-secondary:hover[b-luawx3n4hv] { background-color: #ebecf0; color: #0c66e4; }
.btn-jira-secondary:active[b-luawx3n4hv] { background-color: #dfe1e6; }
.btn-jira-secondary:disabled[b-luawx3n4hv] { opacity: .65; cursor: default; }
/* /Components/Pages/ScreenVerifyDialog.razor.rz.scp.css */
.sv-layout[b-n9rcnatbty] {
    display: flex;
    height: 100%;
    gap: 1px;
    background: #e0e0e0;
}

.sv-sidebar[b-n9rcnatbty] {
    width: 260px;
    min-width: 220px;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
}

.sv-search[b-n9rcnatbty] {
    padding: 6px;
    border-bottom: 1px solid #ddd;
}

.sv-search-input[b-n9rcnatbty] {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
}

.sv-stats[b-n9rcnatbty] {
    display: flex;
    gap: 8px;
    padding: 4px 8px;
    font-size: 11px;
    color: #666;
    border-bottom: 1px solid #ddd;
    flex-wrap: wrap;
}

.sv-stat-matched[b-n9rcnatbty] { color: #2e7d32; }
.sv-stat-gaps[b-n9rcnatbty] { color: #1565c0; }

.sv-screen-list[b-n9rcnatbty] {
    flex: 1;
    overflow-y: auto;
}

.sv-screen-item[b-n9rcnatbty] {
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.sv-screen-item:hover[b-n9rcnatbty] { background: #e8e8e8; }
.sv-screen-item.selected[b-n9rcnatbty] { background: #cde4f7; }
.sv-screen-item.unmigrated[b-n9rcnatbty] { opacity: 0.6; }

.sv-screen-name[b-n9rcnatbty] {
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sv-screen-icon[b-n9rcnatbty] { font-size: 10px; color: #666; }
.sv-screen-item.unmigrated .sv-screen-icon[b-n9rcnatbty] { color: #bbb; }
.sv-screen-item:not(.unmigrated) .sv-screen-icon[b-n9rcnatbty] { color: #2e7d32; }

.sv-screen-meta[b-n9rcnatbty] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

.sv-screen-title[b-n9rcnatbty] {
    font-size: 11px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.sv-gap-badge[b-n9rcnatbty] {
    background: #e53935;
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.sv-verified-badge[b-n9rcnatbty] {
    color: #2e7d32;
    font-size: 13px;
    font-weight: 700;
}

.sv-empty[b-n9rcnatbty] {
    padding: 20px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

.sv-main[b-n9rcnatbty] {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sv-placeholder[b-n9rcnatbty] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    font-size: 14px;
}

.sv-verified-msg p[b-n9rcnatbty] { color: #2e7d32; }

.sv-header[b-n9rcnatbty] {
    padding: 10px 16px 6px;
    border-bottom: 1px solid #eee;
}

.sv-header h2[b-n9rcnatbty] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.sv-header-meta[b-n9rcnatbty] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.sv-tag[b-n9rcnatbty] {
    font-size: 11px;
    padding: 2px 8px;
    background: #e8e8e8;
    border-radius: 3px;
    color: #555;
}

.sv-tag-route[b-n9rcnatbty] { background: #e3f2fd; color: #1565c0; }

.sv-actions[b-n9rcnatbty] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid #eee;
}

.sv-no-blazor[b-n9rcnatbty] { color: #999; font-size: 12px; font-style: italic; }

.sv-result-status[b-n9rcnatbty] {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 3px;
}

.sv-status-ok[b-n9rcnatbty] { background: #e8f5e9; color: #2e7d32; }
.sv-status-gaps[b-n9rcnatbty] { background: #fce4ec; color: #c62828; }

.sv-tabs[b-n9rcnatbty] {
    display: flex;
    border-bottom: 1px solid #ddd;
    padding: 0 16px;
}

.sv-tab[b-n9rcnatbty] {
    padding: 6px 16px;
    font-size: 12px;
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    color: #666;
}

.sv-tab:hover[b-n9rcnatbty] { color: #333; }
.sv-tab.active[b-n9rcnatbty] { color: #1565c0; border-bottom-color: #1565c0; font-weight: 600; }

.sv-tab-content[b-n9rcnatbty] {
    flex: 1;
    overflow: auto;
    padding: 0;
}

/* Code split view */
.sv-code-split[b-n9rcnatbty] {
    display: flex;
    height: 100%;
    gap: 1px;
    background: #ddd;
}

.sv-code-pane[b-n9rcnatbty] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}

.sv-code-header[b-n9rcnatbty] {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
    color: #555;
}

.sv-code[b-n9rcnatbty] {
    flex: 1;
    overflow: auto;
    margin: 0;
    padding: 8px 12px;
    font-size: 12px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    background: #fafafa;
    tab-size: 4;
}

.sv-code-improved[b-n9rcnatbty] {
    background: #f1f8e9;
    border-left: 3px solid #66bb6a;
}

/* Gap cards */
.sv-gap-list[b-n9rcnatbty] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sv-gap-card[b-n9rcnatbty] {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px;
    background: #fafafa;
}

.sv-gap-card.sv-gap-fixed[b-n9rcnatbty] {
    opacity: 0.6;
    background: #f1f8e9;
}

.sv-gap-header[b-n9rcnatbty] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.sv-gap-severity[b-n9rcnatbty] {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}

.sv-sev-high[b-n9rcnatbty] { background: #ffcdd2; color: #b71c1c; }
.sv-sev-medium[b-n9rcnatbty] { background: #fff3e0; color: #e65100; }
.sv-sev-low[b-n9rcnatbty] { background: #e8eaf6; color: #283593; }

.sv-gap-type[b-n9rcnatbty] {
    font-size: 11px;
    padding: 2px 8px;
    background: #e8e8e8;
    border-radius: 3px;
    color: #555;
}

.sv-gap-fixed-badge[b-n9rcnatbty] {
    font-size: 11px;
    padding: 2px 8px;
    background: #c8e6c9;
    color: #2e7d32;
    border-radius: 3px;
    font-weight: 600;
}

.sv-gap-desc[b-n9rcnatbty] {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.sv-gap-ref[b-n9rcnatbty], .sv-gap-fix[b-n9rcnatbty] {
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
    line-height: 1.4;
}

.sv-gap-ref strong[b-n9rcnatbty], .sv-gap-fix strong[b-n9rcnatbty] {
    color: #333;
}

.sv-gap-actions[b-n9rcnatbty] {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.sv-btn-improve[b-n9rcnatbty] {
    font-size: 11px !important;
    padding: 3px 10px !important;
}

/* Summary tab */
.sv-summary[b-n9rcnatbty] {
    padding: 16px;
}

.sv-summary h3[b-n9rcnatbty] { margin: 0 0 8px; font-size: 15px; }
.sv-summary h4[b-n9rcnatbty] { margin: 16px 0 8px; font-size: 13px; color: #555; }
.sv-summary p[b-n9rcnatbty] { font-size: 13px; line-height: 1.5; }

.sv-breakdown[b-n9rcnatbty] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sv-breakdown-row[b-n9rcnatbty] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

/* Improvement panel */
.sv-improvement[b-n9rcnatbty] {
    border-top: 2px solid #66bb6a;
    background: #f9fbe7;
    max-height: 250px;
    overflow: auto;
}

.sv-improvement-header[b-n9rcnatbty] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: #f1f8e9;
}

.sv-improvement-header h3[b-n9rcnatbty] {
    margin: 0;
    font-size: 13px;
    color: #33691e;
}

.sv-improvement-actions[b-n9rcnatbty] {
    display: flex;
    gap: 8px;
}
/* /Components/Pages/TicketFixDialog.razor.rz.scp.css */
/* Diff view — copied from VBToDotNetMigrator.razor.css so the dialog's scoped styles carry it. */
.diff-container[b-s86dwaaqtf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace;
}

.diff-header-row[b-s86dwaaqtf] {
    display: flex;
    background: #2d2d2d;
    border-bottom: 1px solid #3c3c3c;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #858585;
    position: sticky;
    top: 0;
    z-index: 10;
}

.diff-header-col[b-s86dwaaqtf] {
    flex: 1;
    padding: 6px 16px;
    border-right: 1px solid #3c3c3c;
}
.diff-header-col:last-child[b-s86dwaaqtf] {
    border-right: none;
}

.diff-body[b-s86dwaaqtf] {
    flex: 1;
    overflow-y: auto;
}

.diff-table[b-s86dwaaqtf] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.diff-line[b-s86dwaaqtf] {
    display: flex;
    border-bottom: none;
}

.diff-line-num[b-s86dwaaqtf] {
    width: 45px;
    padding: 0 8px;
    text-align: right;
    color: #858585;
    background: #1e1e1e;
    user-select: none;
    font-size: 12px;
    line-height: 20px;
    border-right: 1px solid #2d2d2d;
    flex-shrink: 0;
}

.diff-line-code[b-s86dwaaqtf] {
    flex: 1;
    padding: 0 12px;
    font-size: 13px;
    line-height: 20px;
    white-space: pre;
    overflow-x: auto;
    border-right: 1px solid #3c3c3c;
}
.diff-line-code:last-child[b-s86dwaaqtf] {
    border-right: none;
}

.diff-line-code pre[b-s86dwaaqtf] {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border: none;
    padding: 0;
}

/* Diff coloring */
.diff-deleted[b-s86dwaaqtf] {
    background-color: rgba(255, 0, 0, 0.2) !important;
    color: #fca5a5 !important;
}

.diff-added[b-s86dwaaqtf] {
    background-color: rgba(0, 255, 0, 0.15) !important;
    color: #86efac !important;
}

.diff-empty[b-s86dwaaqtf] {
    background-color: rgba(128, 128, 128, 0.05) !important;
}


/* Jira-styled buttons — mirrors FFeedback.razor.css (scoped there). */
.btn-jira-save[b-s86dwaaqtf] { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #172b4d; border: 1px solid #c1c7d0; font-weight: 600; }
.btn-jira-save:hover[b-s86dwaaqtf] { background: #f4f8ff; color: #0c66e4; border-color: #0c66e4; }
.btn-jira-save:disabled[b-s86dwaaqtf] { opacity: .65; cursor: default; }

.btn-jira-secondary[b-s86dwaaqtf] {
    background-color: #f4f5f7;
    color: #42526e;
    font-weight: 600;
    font-size: calc(13px * var(--fx-zoom, 1));
    padding: 5px 14px;
    border: none;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    height: 32px;
}
.btn-jira-secondary:hover[b-s86dwaaqtf] { background-color: #ebecf0; color: #0c66e4; }
.btn-jira-secondary:active[b-s86dwaaqtf] { background-color: #dfe1e6; }
.btn-jira-secondary:disabled[b-s86dwaaqtf] { opacity: .65; cursor: default; }

.tfx-refusal[b-s86dwaaqtf] { background: #fff4e5; border: 1px solid #f0b37e; padding: 8px; margin: 6px 0; }
.tfx-log[b-s86dwaaqtf] { max-height: 160px; overflow: auto; font: 12px monospace; background: #f7f7f7; border: 1px solid #ddd; padding: 6px; margin: 4px 0; white-space: pre-wrap; }
.tfx-unified[b-s86dwaaqtf] { max-height: 380px; overflow: auto; font: 12px monospace; background: #1e1e1e; color: #d4d4d4; padding: 8px; margin: 0; }

.tfx-layout[b-s86dwaaqtf] { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; font-size: 13px; }
.tfx-top[b-s86dwaaqtf] { flex: 0 0 auto; max-height: 260px; overflow: auto; }
.tfx-middle[b-s86dwaaqtf] { flex: 1 1 auto; min-height: 200px; display: flex; flex-direction: column; overflow: hidden; }
.tfx-middle .diff-container[b-s86dwaaqtf] { flex: 1 1 auto; min-height: 0; height: auto; }
.tfx-bottom[b-s86dwaaqtf] { flex: 0 0 auto; max-height: 240px; overflow: auto; border-top: 1px solid #ddd; padding-top: 6px; }
.tfx-row[b-s86dwaaqtf] { display: flex; gap: 10px; padding: 2px 0; }
.tfx-lbl[b-s86dwaaqtf] { flex: 0 0 150px; color: #555; font-weight: 600; }
.tfx-val[b-s86dwaaqtf] { flex: 1 1 auto; white-space: pre-wrap; }
.tfx-edit-bar[b-s86dwaaqtf] { display: flex; gap: 12px; align-items: center; padding: 4px 0; }
.tfx-path[b-s86dwaaqtf] { font: 12px monospace; }
.tfx-mode[b-s86dwaaqtf] { font-size: 12px; color: #666; }
.tfx-build-head[b-s86dwaaqtf] { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.tfx-progress[b-s86dwaaqtf] { font-style: italic; color: #0c66e4; padding: 4px 0; }
.tfx-hint[b-s86dwaaqtf] { color: #555; padding: 4px 0; }
.tfx-note[b-s86dwaaqtf] { font-size: 12px; color: #666; }
.tfx-notes[b-s86dwaaqtf] { margin: 6px 0 0 18px; padding: 0; font-size: 12px; color: #7a4b00; }
.tfx-push[b-s86dwaaqtf] { display: flex; flex-direction: column; gap: 6px; }
.tfx-spring[b-s86dwaaqtf] { flex: 1 1 auto; }
/* /Components/Pages/VBToDotNetMigrator.razor.rz.scp.css */
/* ===== IDE Shell ===== */
.ide-shell[b-zuvsrl2az2] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #1e1e1e;
    color: #cccccc;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
}

/* ===== Menu Bar ===== */
.ide-menubar[b-zuvsrl2az2] {
    flex-shrink: 0;
    background: #2d2d2d;
    border-bottom: 1px solid #3c3c3c;
}

/* ===== Toolbar ===== */
.ide-toolbar[b-zuvsrl2az2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px;
    background: #252526;
    border-bottom: 1px solid #3c3c3c;
    flex-shrink: 0;
}

.ide-toolbar-actions[b-zuvsrl2az2] {
    display: flex;
    gap: 4px;
}

.ide-btn[b-zuvsrl2az2] {
    background: #3c3c3c;
    color: #cccccc;
    border: 1px solid #505050;
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1.4;
}
.ide-btn:hover:not(:disabled)[b-zuvsrl2az2] { background: #505050; }
.ide-btn:disabled[b-zuvsrl2az2] { opacity: 0.4; cursor: default; }
.ide-btn-cancel[b-zuvsrl2az2] { background: #5a1d1d; color: #f48771; border-color: #8b3232; }
.ide-btn-cancel:hover:not(:disabled)[b-zuvsrl2az2] { background: #6e2424; }

.ide-toolbar-info[b-zuvsrl2az2] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ide-project-name[b-zuvsrl2az2] {
    font-weight: 600;
    color: #e0e0e0;
    white-space: nowrap;
}

.ide-stats[b-zuvsrl2az2] {
    font-size: 11px;
    color: #858585;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ide-toolbar-llm[b-zuvsrl2az2] {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.ide-select[b-zuvsrl2az2] {
    background: #3c3c3c;
    color: #cccccc;
    border: 1px solid #505050;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 11px;
}
.ide-select:disabled[b-zuvsrl2az2] { opacity: 0.5; }

/* ===== Body: sidebar + editor ===== */
.ide-body[b-zuvsrl2az2] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ===== Sidebar ===== */
.ide-sidebar[b-zuvsrl2az2] {
    width: 280px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    background: #252526;
    border-right: 1px solid #3c3c3c;
    flex-shrink: 0;
}

.ide-panel[b-zuvsrl2az2] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ide-panel-vb6[b-zuvsrl2az2] {
    flex: 1;
}

.ide-panel-dotnet[b-zuvsrl2az2] {
    flex: 1;
}

.ide-panel-divider[b-zuvsrl2az2] {
    height: 3px;
    background: #3c3c3c;
    cursor: row-resize;
    flex-shrink: 0;
}

.ide-panel-header[b-zuvsrl2az2] {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #bbbbbb;
    background: #2d2d2d;
    border-bottom: 1px solid #3c3c3c;
    flex-shrink: 0;
}

.ide-panel-content[b-zuvsrl2az2] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.ide-tree[b-zuvsrl2az2] {
    font-size: 12px;
}

/* Dark theme overrides for FlexKit tree grids in sidebar */
.ide-panel[b-zuvsrl2az2]  .fx-treegrid,
.ide-panel[b-zuvsrl2az2]  .fx-treegrid-container {
    background: #252526 !important;
    color: #cccccc !important;
    border: none !important;
}

.ide-panel[b-zuvsrl2az2]  .fx-treegrid-header {
    display: none !important;
}

.ide-panel[b-zuvsrl2az2]  .fx-treegrid-row {
    background: #252526 !important;
    color: #cccccc !important;
    border-bottom: none !important;
}

.ide-panel[b-zuvsrl2az2]  .fx-treegrid-row:hover {
    background: #2a2d2e !important;
}

.ide-panel[b-zuvsrl2az2]  .fx-treegrid-row.fx-selected,
.ide-panel[b-zuvsrl2az2]  .fx-treegrid-row.fx-row-selected,
.ide-panel[b-zuvsrl2az2]  .fx-treegrid-row.fx-treegrid-selected {
    background: #094771 !important;
    color: #ffffff !important;
}

.ide-panel[b-zuvsrl2az2]  .fx-treegrid-cell {
    border: none !important;
    color: inherit !important;
    padding: 1px 4px !important;
    font-size: 13px !important;
    line-height: 22px !important;
}

.ide-panel[b-zuvsrl2az2]  .fx-treegrid-expand-icon {
    color: #858585 !important;
    font-size: 11px !important;
    width: 16px !important;
    text-align: center !important;
    cursor: pointer;
}

.ide-panel[b-zuvsrl2az2]  .fx-treegrid-leaf-icon {
    width: 16px !important;
    display: inline-block !important;
}

.ide-panel[b-zuvsrl2az2]  .fx-treegrid-scroll {
    background: #252526 !important;
}

.ide-panel[b-zuvsrl2az2]  .fx-pager,
.ide-panel[b-zuvsrl2az2]  .fx-treegrid-pager {
    display: none !important;
}

.ide-panel[b-zuvsrl2az2]  .fx-treegrid-icon {
    display: none !important;
}

/* ===== VB6 Explorer — classic VB6 IDE light theme ===== */
.ide-panel-vb6[b-zuvsrl2az2] {
    background: #ffffff;
}

.ide-panel-vb6 .ide-panel-header[b-zuvsrl2az2] {
    background: #d4d0c8;
    color: #000000;
    border-bottom: 1px solid #808080;
    font-size: 11px;
    padding: 3px 8px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: bold;
}

.ide-panel-vb6[b-zuvsrl2az2]  .fx-treegrid,
.ide-panel-vb6[b-zuvsrl2az2]  .fx-treegrid-container {
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
}

.ide-panel-vb6[b-zuvsrl2az2]  .fx-treegrid-row {
    background: #ffffff !important;
    color: #000000 !important;
    border-bottom: none !important;
}

.ide-panel-vb6[b-zuvsrl2az2]  .fx-treegrid-row:hover {
    background: #e8e8e8 !important;
}

.ide-panel-vb6[b-zuvsrl2az2]  .fx-treegrid-row.fx-treegrid-selected {
    background: #0a246a !important;
    color: #ffffff !important;
}

.ide-panel-vb6[b-zuvsrl2az2]  .fx-treegrid-cell {
    border: none !important;
    color: inherit !important;
    padding: 0px 2px !important;
    font-size: 12px !important;
    line-height: 20px !important;
}

.ide-panel-vb6[b-zuvsrl2az2]  .fx-treegrid-scroll {
    background: #ffffff !important;
}

/* ===== File icons ===== */
[b-zuvsrl2az2] .fi {
    display: inline-block;
    width: 18px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    margin-right: 4px;
    vertical-align: middle;
    line-height: 16px;
    flex-shrink: 0;
    border-radius: 2px;
}

[b-zuvsrl2az2] .tree-name {
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* VB6 file icons — classic VB6 IDE style */
[b-zuvsrl2az2] .fi-vbp { color: #ffffff; background: #000080; font-size: 8px; border-radius: 1px; padding: 1px; }
[b-zuvsrl2az2] .fi-vbp::before { content: "VB"; }
[b-zuvsrl2az2] .fi-group { color: #c8a800; font-size: 12px; background: none; }
[b-zuvsrl2az2] .fi-group::before { content: "📁"; font-size: 12px; }
[b-zuvsrl2az2] .fi-frm { color: #0000ff; font-size: 11px; background: none; }
[b-zuvsrl2az2] .fi-frm::before { content: "🖼"; font-size: 12px; }
[b-zuvsrl2az2] .fi-mod { color: #ffffff; background: #008000; font-size: 8px; border-radius: 1px; padding: 1px; }
[b-zuvsrl2az2] .fi-mod::before { content: "bas"; }
[b-zuvsrl2az2] .fi-cls { color: #ffffff; background: #808000; font-size: 8px; border-radius: 1px; padding: 1px; }
[b-zuvsrl2az2] .fi-cls::before { content: "cls"; }
[b-zuvsrl2az2] .fi-ctl { color: #0000ff; font-size: 11px; background: none; }
[b-zuvsrl2az2] .fi-ctl::before { content: "🔧"; font-size: 12px; }
[b-zuvsrl2az2] .fi-file { color: #808080; font-size: 11px; background: none; }
[b-zuvsrl2az2] .fi-file::before { content: "📄"; font-size: 12px; }

/* .NET file icons */
[b-zuvsrl2az2] .fi-dir { color: #dcb67a; }
[b-zuvsrl2az2] .fi-dir::before { content: "▪"; font-size: 13px; }
[b-zuvsrl2az2] .fi-cs { color: #4ec9b0; background: rgba(78,201,176,0.15); }
[b-zuvsrl2az2] .fi-cs::before { content: "C#"; font-size: 9px; }
[b-zuvsrl2az2] .fi-java { color: #ffffff; background: #e25a1e; font-size: 8px; border-radius: 1px; padding: 1px; }
[b-zuvsrl2az2] .fi-java::before { content: "Java"; }
[b-zuvsrl2az2] .fi-razor { color: #c586c0; background: rgba(197,134,192,0.15); }
[b-zuvsrl2az2] .fi-razor::before { content: "R"; }
[b-zuvsrl2az2] .fi-css { color: #519aba; background: rgba(81,154,186,0.15); }
[b-zuvsrl2az2] .fi-css::before { content: "{}"; font-size: 8px; }
[b-zuvsrl2az2] .fi-json { color: #cbcb41; background: rgba(203,203,65,0.12); }
[b-zuvsrl2az2] .fi-json::before { content: "{}"; font-size: 8px; }
[b-zuvsrl2az2] .fi-csproj { color: #569cd6; background: rgba(86,156,214,0.15); }
[b-zuvsrl2az2] .fi-csproj::before { content: "⬡"; font-size: 12px; }
[b-zuvsrl2az2] .fi-html { color: #e37933; background: rgba(227,121,51,0.12); }
[b-zuvsrl2az2] .fi-html::before { content: "<>"; font-size: 8px; }

/* C++ file icons */
[b-zuvsrl2az2] .fi-cpp { color: #ffffff; background: #0044ff; font-size: 8px; border-radius: 1px; padding: 1px; }
[b-zuvsrl2az2] .fi-cpp::before { content: "C++"; }
[b-zuvsrl2az2] .fi-h { color: #ffffff; background: #9900ee; font-size: 8px; border-radius: 1px; padding: 1px; }
[b-zuvsrl2az2] .fi-h::before { content: "H"; }
[b-zuvsrl2az2] .fi-idl { color: #ffffff; background: #555555; font-size: 8px; border-radius: 1px; padding: 1px; }
[b-zuvsrl2az2] .fi-idl::before { content: "IDL"; }

.ide-empty[b-zuvsrl2az2] {
    padding: 20px 12px;
    color: #6a6a6a;
    text-align: center;
    font-size: 12px;
}

/* ===== Editor area ===== */
.ide-editor[b-zuvsrl2az2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #1e1e1e;
}

.ide-welcome[b-zuvsrl2az2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6a6a6a;
    gap: 8px;
}
.ide-welcome h2[b-zuvsrl2az2] {
    font-size: 24px;
    color: #858585;
    font-weight: 300;
}
.ide-welcome p[b-zuvsrl2az2] { font-size: 13px; }

.ide-link[b-zuvsrl2az2] {
    background: none;
    border: none;
    color: #569cd6;
    cursor: pointer;
    text-decoration: underline;
    font-size: 13px;
    padding: 0;
}
.ide-link:hover[b-zuvsrl2az2] { color: #7ec8f7; }

/* ===== Tab bar ===== */
.ide-tab-bar[b-zuvsrl2az2] {
    display: flex;
    background: #252526;
    border-bottom: 1px solid #3c3c3c;
    flex-shrink: 0;
    overflow-x: auto;
}
.ide-tab-bar[b-zuvsrl2az2]::-webkit-scrollbar { height: 3px; }
.ide-tab-bar[b-zuvsrl2az2]::-webkit-scrollbar-thumb { background: #505050; }

.ide-tab[b-zuvsrl2az2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #2d2d2d;
    border-right: 1px solid #3c3c3c;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
    color: #969696;
    min-width: 0;
    max-width: 200px;
}
.ide-tab:hover[b-zuvsrl2az2] { background: #353535; }
.ide-tab.active[b-zuvsrl2az2] {
    background: #1e1e1e;
    color: #ffffff;
    border-bottom: 2px solid #569cd6;
}

.ide-tab-icon[b-zuvsrl2az2] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ide-tab-icon.vb6[b-zuvsrl2az2] { background: #6a9fb5; }
.ide-tab-icon.dotnet[b-zuvsrl2az2] { background: #9b59b6; }
.ide-tab-icon.plain[b-zuvsrl2az2] { background: #858585; }

.ide-tab-title[b-zuvsrl2az2] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ide-tab-close[b-zuvsrl2az2] {
    background: none;
    border: none;
    color: #858585;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}
.ide-tab-close:hover[b-zuvsrl2az2] { color: #ffffff; }

/* ===== Editor content ===== */
.ide-editor-content[b-zuvsrl2az2] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

/* ===== Split Editor for C++ / Java ===== */
.split-editor-layout[b-zuvsrl2az2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.split-pane[b-zuvsrl2az2] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.split-pane-header[b-zuvsrl2az2] {
    background: #252526;
    color: #cccccc;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: bold;
    border-bottom: 1px solid #1e1e1e;
    flex-shrink: 0;
    user-select: none;
}

.split-pane-content[b-zuvsrl2az2] {
    flex: 1;
    overflow: auto;
    background: #1e1e1e;
}

.split-pane-divider[b-zuvsrl2az2] {
    height: 4px;
    background: #333337;
    flex-shrink: 0;
}

.empty-translated-state[b-zuvsrl2az2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #858585;
    font-size: 13px;
    padding: 20px;
    text-align: center;
}

.ide-code[b-zuvsrl2az2] {
    margin: 0;
    padding: 12px 16px;
    font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    tab-size: 4;
    white-space: pre;
    overflow-x: auto;
    color: #d4d4d4;
    background: #1e1e1e;
    min-height: 100%;
}

/* ===== Status bar ===== */
.ide-statusbar[b-zuvsrl2az2] {
    display: flex;
    align-items: center;
    padding: 2px 12px;
    background: #007acc;
    color: #ffffff;
    font-size: 12px;
    flex-shrink: 0;
    gap: 12px;
}

.ide-status-msg[b-zuvsrl2az2] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ide-status-busy[b-zuvsrl2az2] {
    font-weight: 600;
    animation: pulse-busy-b-zuvsrl2az2 1.2s infinite;
}

@keyframes pulse-busy-b-zuvsrl2az2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===== VB6: light background, classic VB IDE colors ===== */
.ide-code.vb6[b-zuvsrl2az2] {
    background: #ffffff;
    color: #000000;
}
.ide-code.vb6[b-zuvsrl2az2]  .tok-kw { color: #0000ff; }
.ide-code.vb6[b-zuvsrl2az2]  .tok-str { color: #800000; }
.ide-code.vb6[b-zuvsrl2az2]  .tok-cmt { color: #008000; font-style: italic; }

/* ===== .NET / Blazor: dark VS Code theme ===== */
.ide-code.dotnet[b-zuvsrl2az2] {
    background: #1e1e1e;
    color: #d4d4d4;
}
.ide-code.dotnet[b-zuvsrl2az2]  .tok-kw { color: #569cd6; }
.ide-code.dotnet[b-zuvsrl2az2]  .tok-str { color: #ce9178; }
.ide-code.dotnet[b-zuvsrl2az2]  .tok-cmt { color: #6a9955; font-style: italic; }
.ide-code.dotnet[b-zuvsrl2az2]  .tok-num { color: #b5cea8; }
.ide-code.dotnet[b-zuvsrl2az2]  .tok-type { color: #4ec9b0; }
.ide-code.dotnet[b-zuvsrl2az2]  .tok-func { color: #dcdcaa; }
.ide-code.dotnet[b-zuvsrl2az2]  .tok-razor { color: #c586c0; }
.ide-code.dotnet[b-zuvsrl2az2]  .tok-htmltag { color: #569cd6; }
.ide-code.dotnet[b-zuvsrl2az2]  .tok-attr { color: #d7ba7d; }

/* ===== C++: dark VS Code theme ===== */
.ide-code.cpp[b-zuvsrl2az2] {
    background: #1e1e1e;
    color: #d4d4d4;
}
.ide-code.cpp[b-zuvsrl2az2]  .tok-kw { color: #569cd6; }
.ide-code.cpp[b-zuvsrl2az2]  .tok-str { color: #ce9178; }
.ide-code.cpp[b-zuvsrl2az2]  .tok-cmt { color: #6a9955; font-style: italic; }
.ide-code.cpp[b-zuvsrl2az2]  .tok-num { color: #b5cea8; }
.ide-code.cpp[b-zuvsrl2az2]  .tok-type { color: #4ec9b0; }
.ide-code.cpp[b-zuvsrl2az2]  .tok-func { color: #dcdcaa; }

/* ===== Java: dark Rider theme ===== */
.ide-code.java[b-zuvsrl2az2] {
    background: #2b2b2b;
    color: #a9b7c6;
}
.ide-code.java[b-zuvsrl2az2]  .tok-kw { color: #cc7832; font-weight: bold; }
.ide-code.java[b-zuvsrl2az2]  .tok-str { color: #6a8759; }
.ide-code.java[b-zuvsrl2az2]  .tok-cmt { color: #808080; font-style: italic; }
.ide-code.java[b-zuvsrl2az2]  .tok-num { color: #6897bb; }
.ide-code.java[b-zuvsrl2az2]  .tok-type { color: #287bde; }
.ide-code.java[b-zuvsrl2az2]  .tok-func { color: #ffc66d; }

/* ===== Plain / unknown files ===== */
.ide-code.plain[b-zuvsrl2az2] {
    background: #1e1e1e;
    color: #d4d4d4;
}

/* ===== Tree row status dots ===== */
.dot-ok[b-zuvsrl2az2] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ec9b0;
}

.dot-pending[b-zuvsrl2az2] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cca700;
}

/* ===== Dialogs ===== */
.dialog-form[b-zuvsrl2az2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.dialog-form label[b-zuvsrl2az2] {
    font-size: 0.84rem;
    color: #334155;
    font-weight: 600;
}

.dialog-btn-primary[b-zuvsrl2az2] {
    margin-right: 8px;
    background: #0f62fe;
    color: #ffffff;
}

.dialog-btn[b-zuvsrl2az2] {
    margin-right: 8px;
}

.state-tag[b-zuvsrl2az2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.state-ok[b-zuvsrl2az2] {
    background: #d8f3dc;
    color: #1b4332;
}

.state-pending[b-zuvsrl2az2] {
    background: #fff3bf;
    color: #7f5539;
}

/* ===== Migration Wizard ===== */
.migration-wizard-form[b-zuvsrl2az2] { gap: 6px; }

.wizard-row[b-zuvsrl2az2] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.wizard-hint[b-zuvsrl2az2] {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: -2px;
}

.wizard-profile-row[b-zuvsrl2az2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.wizard-profile-field[b-zuvsrl2az2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wizard-profile-field label[b-zuvsrl2az2] {
    font-size: 0.78rem;
    color: #475569;
    font-weight: 500;
}

.wizard-select[b-zuvsrl2az2] {
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.82rem;
    background: #fff;
    color: #1e293b;
}

.wizard-locate-btn[b-zuvsrl2az2] {
    border: 1px solid #b8c7e6;
    border-radius: 4px;
    background: #edf2ff;
    color: #1e3a8a;
    padding: 3px 8px;
    font-size: 0.76rem;
    cursor: pointer;
}
.wizard-locate-btn:disabled[b-zuvsrl2az2] { opacity: 0.55; cursor: default; }

.wizard-db-section[b-zuvsrl2az2] {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px 4px;
    background: #f8fafc;
}

/* The Pipeline Progress dialog body and its rules live in Components/Jobs/PipelineProgressView.razor(.css). */

.status-box[b-zuvsrl2az2] { width: 100%; }

/* ===== Run Project dialog ===== */
.run-dialog-body[b-zuvsrl2az2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}

.run-status-row[b-zuvsrl2az2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.run-dot[b-zuvsrl2az2] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #858585;
    flex-shrink: 0;
}

.run-dot-active[b-zuvsrl2az2] {
    background: #4ec9b0;
    box-shadow: 0 0 6px #4ec9b0;
    animation: pulse-dot-b-zuvsrl2az2 1.5s infinite;
}

@keyframes pulse-dot-b-zuvsrl2az2 {
    0%, 100% { box-shadow: 0 0 4px #4ec9b0; }
    50% { box-shadow: 0 0 12px #4ec9b0; }
}

.run-url-row[b-zuvsrl2az2] {
    padding: 12px 16px;
    background: #1e293b;
    border-radius: 6px;
    text-align: center;
}

.run-url-link[b-zuvsrl2az2] {
    color: #60a5fa;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    text-decoration: none;
}
.run-url-link:hover[b-zuvsrl2az2] {
    color: #93c5fd;
    text-decoration: underline;
}

.run-hint[b-zuvsrl2az2] {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

/* Status bar running URL link */
.ide-status-url[b-zuvsrl2az2] {
    color: #ffffff;
    text-decoration: underline;
    font-size: 12px;
    cursor: pointer;
}
.ide-status-url:hover[b-zuvsrl2az2] { color: #cce5ff; }

/* Running button glow */
.ide-btn-running[b-zuvsrl2az2] {
    background: #0e4429;
    color: #4ec9b0;
    border-color: #2ea043;
    animation: pulse-running-b-zuvsrl2az2 1.5s infinite;
}
.ide-btn-running:hover[b-zuvsrl2az2] { background: #196c3d; }

@keyframes pulse-running-b-zuvsrl2az2 {
    0%, 100% { border-color: #2ea043; }
    50% { border-color: #4ec9b0; }
}

/* ===== Browser / Validation Panel ===== */

/* Toolbar inside tab bar — pushed to right */
.bv-toolbar[b-zuvsrl2az2] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 0 8px;
    flex-shrink: 0;
}

/* Main split: iframe on top, console on bottom */
.bv-split[b-zuvsrl2az2] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Top: iframe container */
.bv-iframe-wrap[b-zuvsrl2az2] {
    flex: 3;
    min-height: 120px;
    overflow: hidden;
    border-bottom: 2px solid #3c3c3c;
    position: relative;
}

.bv-iframe[b-zuvsrl2az2] {
    width: 100%;
    height: 100%;
    border: none;
    background: #ffffff;
}

/* Placeholder when iframe can't load (X-Frame-Options) */
.bv-preview-placeholder[b-zuvsrl2az2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    background: #1e1e1e;
}

.bv-preview-icon[b-zuvsrl2az2] {
    font-size: 48px;
    opacity: 0.4;
}

.bv-preview-link[b-zuvsrl2az2] {
    color: #60a5fa;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    text-decoration: none;
}
.bv-preview-link:hover[b-zuvsrl2az2] {
    color: #93c5fd;
    text-decoration: underline;
}

.bv-preview-hint[b-zuvsrl2az2] {
    color: #6a6a6a;
    font-size: 12px;
}

/* Bottom: console + validation panel */
.bv-bottom[b-zuvsrl2az2] {
    flex: 2;
    display: flex;
    flex-direction: column;
    min-height: 80px;
    overflow: hidden;
    background: #1e1e1e;
}

/* Console/Validation tab strip */
.bv-bottom-tabs[b-zuvsrl2az2] {
    display: flex;
    gap: 0;
    background: #252526;
    border-bottom: 1px solid #3c3c3c;
    flex-shrink: 0;
}

.bv-bottom-tab[b-zuvsrl2az2] {
    padding: 5px 14px;
    font-size: 11px;
    color: #969696;
    cursor: pointer;
    border-right: 1px solid #3c3c3c;
    white-space: nowrap;
    user-select: none;
}
.bv-bottom-tab:hover[b-zuvsrl2az2] { color: #cccccc; background: #2d2d2d; }
.bv-bottom-tab.active[b-zuvsrl2az2] {
    color: #ffffff;
    background: #1e1e1e;
    border-bottom: 2px solid #569cd6;
}

/* Scrollable console area */
.bv-console[b-zuvsrl2az2] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0;
}
.bv-console[b-zuvsrl2az2]::-webkit-scrollbar { width: 8px; }
.bv-console[b-zuvsrl2az2]::-webkit-scrollbar-track { background: #1e1e1e; }
.bv-console[b-zuvsrl2az2]::-webkit-scrollbar-thumb { background: #424242; border-radius: 4px; }

/* ── Validation results ── */
.bv-validation-results[b-zuvsrl2az2] {
    border-bottom: 1px solid #3c3c3c;
}

.bv-vr-row[b-zuvsrl2az2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    font-size: 12px;
    font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace;
    border-bottom: 1px solid #2a2a2a;
}
.bv-vr-row:last-child[b-zuvsrl2az2] { border-bottom: none; }

.bv-vr-ok[b-zuvsrl2az2] {
    background: rgba(78, 201, 176, 0.06);
}

.bv-vr-fail[b-zuvsrl2az2] {
    background: rgba(244, 135, 113, 0.08);
}

.bv-vr-icon[b-zuvsrl2az2] {
    width: 16px;
    text-align: center;
    font-weight: 700;
    flex-shrink: 0;
}
.bv-vr-ok .bv-vr-icon[b-zuvsrl2az2] { color: #4ec9b0; }
.bv-vr-fail .bv-vr-icon[b-zuvsrl2az2] { color: #f48771; }

.bv-vr-route[b-zuvsrl2az2] {
    color: #569cd6;
    min-width: 100px;
    flex-shrink: 0;
}

.bv-vr-file[b-zuvsrl2az2] {
    color: #858585;
    min-width: 120px;
    flex-shrink: 0;
    font-size: 11px;
}

.bv-vr-status[b-zuvsrl2az2] {
    color: #cccccc;
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

.bv-vr-badge[b-zuvsrl2az2] {
    background: #3c3c3c;
    color: #cccccc;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    flex-shrink: 0;
}

.bv-vr-errors[b-zuvsrl2az2] {
    color: #f48771;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

/* ── Process output log ── */
.bv-log[b-zuvsrl2az2] {
    padding: 4px 0;
}

.bv-log-line[b-zuvsrl2az2] {
    display: flex;
    gap: 8px;
    padding: 1px 12px;
    font-size: 12px;
    font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace;
    line-height: 1.5;
    color: #cccccc;
}
.bv-log-line:hover[b-zuvsrl2az2] {
    background: rgba(255, 255, 255, 0.03);
}

.bv-log-error[b-zuvsrl2az2] {
    color: #f48771;
    background: rgba(244, 135, 113, 0.06);
}
.bv-log-error:hover[b-zuvsrl2az2] {
    background: rgba(244, 135, 113, 0.1);
}

.bv-log-time[b-zuvsrl2az2] {
    color: #505050;
    flex-shrink: 0;
    font-size: 11px;
    user-select: none;
}

.bv-log-text[b-zuvsrl2az2] {
    white-space: pre-wrap;
    word-break: break-word;
    min-width: 0;
    flex: 1;
}

/* Screenshot buttons in Component Grid */
[b-zuvsrl2az2] .ss-btn {
    display: inline-block;
    padding: 1px 8px;
    font-size: 11px;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    border: 1px solid #ccc;
    background: #f0f0f0;
    line-height: 18px;
}

[b-zuvsrl2az2] .ss-has {
    background: #d4edda;
    border-color: #90c9a0;
    color: #155724;
}

[b-zuvsrl2az2] .ss-has:hover {
    background: #c3e6cb;
}

[b-zuvsrl2az2] .ss-upload {
    background: #fff3cd;
    border-color: #d4a944;
    color: #856404;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
}

[b-zuvsrl2az2] .ss-upload:hover {
    background: #ffe69c;
}

/* ===== Side-by-Side Diff Layout ===== */
.ide-editor-header[b-zuvsrl2az2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    background: #252526;
    border-bottom: 1px solid #3c3c3c;
    flex-shrink: 0;
}

.ide-editor-filepath[b-zuvsrl2az2] {
    font-size: 12px;
    color: #858585;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.compare-btn[b-zuvsrl2az2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    background: #3c3c3c;
    color: #cccccc;
    border: 1px solid #505050;
    border-radius: 3px;
    cursor: pointer;
}

.compare-btn:hover[b-zuvsrl2az2] {
    background: #505050;
    color: #ffffff;
}

.compare-btn.active[b-zuvsrl2az2] {
    background: #094771;
    border-color: #0b588c;
    color: #ffffff;
}

.diff-container[b-zuvsrl2az2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace;
}

.diff-header-row[b-zuvsrl2az2] {
    display: flex;
    background: #2d2d2d;
    border-bottom: 1px solid #3c3c3c;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #858585;
    position: sticky;
    top: 0;
    z-index: 10;
}

.diff-header-col[b-zuvsrl2az2] {
    flex: 1;
    padding: 6px 16px;
    border-right: 1px solid #3c3c3c;
}
.diff-header-col:last-child[b-zuvsrl2az2] {
    border-right: none;
}

.diff-body[b-zuvsrl2az2] {
    flex: 1;
    overflow-y: auto;
}

.diff-table[b-zuvsrl2az2] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.diff-line[b-zuvsrl2az2] {
    display: flex;
    border-bottom: none;
}

.diff-line-num[b-zuvsrl2az2] {
    width: 45px;
    padding: 0 8px;
    text-align: right;
    color: #858585;
    background: #1e1e1e;
    user-select: none;
    font-size: 12px;
    line-height: 20px;
    border-right: 1px solid #2d2d2d;
    flex-shrink: 0;
}

.diff-line-code[b-zuvsrl2az2] {
    flex: 1;
    padding: 0 12px;
    font-size: 13px;
    line-height: 20px;
    white-space: pre;
    overflow-x: auto;
    border-right: 1px solid #3c3c3c;
}
.diff-line-code:last-child[b-zuvsrl2az2] {
    border-right: none;
}

.diff-line-code pre[b-zuvsrl2az2] {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border: none;
    padding: 0;
}

/* Diff coloring */
.diff-deleted[b-zuvsrl2az2] {
    background-color: rgba(255, 0, 0, 0.2) !important;
    color: #fca5a5 !important;
}

.diff-added[b-zuvsrl2az2] {
    background-color: rgba(0, 255, 0, 0.15) !important;
    color: #86efac !important;
}

.diff-empty[b-zuvsrl2az2] {
    background-color: rgba(128, 128, 128, 0.05) !important;
}

/* Twin Live Logs Styles */
.twin-logs-container[b-zuvsrl2az2] {
    display: flex;
    flex-direction: row;
    height: calc(100% - 35px); /* subtract tab bar height */
    background: #1e1e1e;
    gap: 1px;
    border-top: 1px solid #2d2d2d;
}

.twin-log-pane[b-zuvsrl2az2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #1e1e1e;
    overflow: hidden;
}

.twin-log-pane:first-child[b-zuvsrl2az2] {
    border-right: 1px solid #2d2d2d;
}

.twin-log-header[b-zuvsrl2az2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e2e8f0;
    border-bottom: 1px solid #2d2d2d;
    background: #252526;
}

.cpp-header[b-zuvsrl2az2] {
    border-top: 2px solid #3b82f6;
}

.java-header[b-zuvsrl2az2] {
    border-top: 2px solid #eab308;
}

.status-indicator[b-zuvsrl2az2] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.status-indicator.online[b-zuvsrl2az2] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.twin-log-body[b-zuvsrl2az2] {
    flex: 1;
    padding: 12px;
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    font-size: 0.78rem;
    color: #d4d4d4;
    overflow-y: auto;
    background: #1e1e1e;
    line-height: 1.4;
}

.log-line[b-zuvsrl2az2] {
    margin-bottom: 6px;
    white-space: pre-wrap;
    word-break: break-all;
    border-bottom: 1px solid #252526;
    padding-bottom: 4px;
}

.log-line-empty[b-zuvsrl2az2] {
    color: #6a737d;
    font-style: italic;
    text-align: center;
    padding-top: 40px;
}

.log-time[b-zuvsrl2az2] {
    color: #6a737d;
    margin-right: 8px;
}

.log-comp[b-zuvsrl2az2] {
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    margin-right: 8px;
    font-size: 0.72rem;
}

.log-comp.cpp[b-zuvsrl2az2] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.log-comp.java[b-zuvsrl2az2] {
    background: rgba(234, 179, 8, 0.15);
    color: #fde047;
}

.log-msg[b-zuvsrl2az2] {
    color: #e2e8f0;
}

.active-btn[b-zuvsrl2az2] {
    background: #2563eb !important;
    color: #ffffff !important;
}