@push('styles')
<style>
    [x-cloak] {
        display: none !important;
    }

    .b2b-page {
        --b2b-primary: #0c0d1a;
        --b2b-primary-dark: #0c0d1a;
        --b2b-primary-soft: #f3f3f6;
        --b2b-ink: #111827;
        --b2b-text: #334155;
        --b2b-muted: #8a94a8;
        --b2b-line: #e5e7eb;
        --b2b-bg: transparent;
        --b2b-card: #ffffff;
        --b2b-success-bg: #e9f9ef;
        --b2b-success-text: #15803d;
        --b2b-warning-bg: #fff4dd;
        --b2b-warning-text: #b45309;
        --b2b-danger-bg: #fdebec;
        --b2b-danger-text: #dc2626;
        --b2b-neutral-bg: #eef2f7;
        --b2b-neutral-text: #64748b;
        background: var(--b2b-bg);
        min-height: calc(100vh - 5rem);
        padding: 0.25rem 0;
    }

    .b2b-shell {
        max-width: 100%;
        color: var(--b2b-text);
    }

    .b2b-alert {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: 18px;
        padding: 0.95rem 1rem;
        font-size: 0.92rem;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    }

    .b2b-alert.info {
        background: #f8fafc;
        border-color: #e5e7eb;
        color: #334155;
    }

    .b2b-alert.success {
        background: #ecfdf5;
        border-color: #bbf7d0;
        color: #15803d;
    }

    .b2b-alert.error {
        background: #fef2f2;
        border-color: #fecaca;
        color: #dc2626;
    }

    .b2b-alert button {
        border: 0;
        background: transparent;
        color: inherit;
        font-size: 1rem;
        cursor: pointer;
    }

    .b2b-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.85rem;
    }

    .b2b-crumb {
        margin: 0 0 0.35rem;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        color: var(--b2b-muted);
        text-transform: uppercase;
    }

    .b2b-title {
        margin: 0;
        font-size: clamp(1.75rem, 2vw, 2.25rem);
        font-weight: 800;
        color: var(--b2b-ink);
        letter-spacing: -0.03em;
    }

    .b2b-subtitle {
        margin: 0.45rem 0 0;
        max-width: 52rem;
        font-size: 0.96rem;
        color: #5f6b85;
    }

    .b2b-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .b2b-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        border-radius: 14px;
        padding: 0.85rem 1rem;
        border: 1px solid transparent;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .b2b-btn:hover {
        transform: translateY(-1px);
    }

    .b2b-btn:disabled {
        opacity: 0.68;
        cursor: wait;
        transform: none;
        box-shadow: none;
    }

    .b2b-btn-primary {
        background: #0c0d1a;
        color: #fff;
        box-shadow: 0 6px 16px rgba(12, 13, 26, 0.14);
    }

    .b2b-btn-secondary {
        background: #fff;
        color: #374151;
        border-color: #e5e7eb;
    }

    .b2b-btn-dark {
        background: #0c0d1a;
        color: #fff;
        box-shadow: 0 6px 16px rgba(12, 13, 26, 0.14);
    }

    .b2b-btn-ghost {
        background: #fff;
        color: #374151;
        border-color: #e5e7eb;
    }

    .b2b-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-bottom: 0.85rem;
        padding: 0 0 0.25rem;
        overflow-x: auto;
    }

    .b2b-tab {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        border: 1px solid transparent;
        border-radius: 9999px;
        padding: 0.62rem 1rem;
        background: #f3f3f6;
        color: #4b5563;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.18s ease;
        white-space: nowrap;
    }

    .b2b-tab.active {
        background: #fff;
        color: #111827;
        border-color: #e5e7eb;
    }

    .b2b-tab-count {
        min-width: 1.35rem;
        padding: 0.14rem 0.35rem;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.16);
        color: inherit;
        font-size: 0.73rem;
        text-align: center;
    }

    .b2b-surface {
        /* background: #fff; */
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
    }

    .b2b-filter-bar {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
        gap: 0.85rem;
        align-items: end;
        padding: 1rem;
        margin-bottom: 0.85rem;
    }

    .b2b-filter-actions {
        display: flex;
        align-items: flex-end;
        gap: 0.75rem;
        min-height: 100%;
    }

    .b2b-filter-actions .b2b-btn {
        min-width: 5.75rem;
        min-height: 2.9rem;
        padding: 0 1.15rem;
    }

    .b2b-section-status {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        margin: 0 0 0.85rem;
        padding: 0.7rem 0.95rem;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        background: #ffffff;
        color: #475569;
        font-size: 0.84rem;
        font-weight: 700;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    }

    .b2b-section-spinner {
        width: 0.95rem;
        height: 0.95rem;
        border-radius: 999px;
        border: 2px solid rgba(79, 70, 229, 0.15);
        border-top-color: #4f46e5;
        animation: b2b-spin 0.8s linear infinite;
    }

    @keyframes b2b-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .b2b-field label,
    .b2b-form-field label {
        display: block;
        margin-bottom: 0.38rem;
        font-size: 0.76rem;
        font-weight: 700;
        color: #5f6b85;
    }

    .b2b-input,
    .b2b-select,
    .b2b-textarea {
        width: 100%;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #fff;
        color: #111827;
        padding: 0.55rem 0.9rem;
        font-size: 0.85rem;
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .b2b-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.75 7.5 10 11.75 14.25 7.5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.9rem center;
        padding-right: 2.6rem;
    }

    .b2b-input:focus,
    .b2b-select:focus,
    .b2b-textarea:focus {
        outline: none;
        border-color: #cbd5e1;
        box-shadow: 0 0 0 3px rgba(226, 232, 240, 0.85);
    }

    .b2b-grid-6 {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0.85rem;
        margin-bottom: 0.85rem;
    }

    .b2b-stat {
        padding: 1.1rem;
        min-height: 8.25rem;
        overflow: hidden;
        position: unset;
        border-radius: 14px;
        border: 1px solid #e5e7eb;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .b2b-stat:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    }

    .b2b-stat::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: #f3f4f6;
    }

    .b2b-stat.violet,
    .b2b-stat.amber,
    .b2b-stat.rose,
    .b2b-stat.sky,
    .b2b-stat.mint,
    .b2b-stat.lavender {
        background: #fff;
    }

    .b2b-stat.violet {
        background: linear-gradient(180deg, #f0ecff 0%, #f8f6ff 100%);
        border-color: #e8e3ff;
    }

    .b2b-stat.amber {
        background: linear-gradient(180deg, #fff7e3 0%, #fffcf1 100%);
        border-color: #fff1cf;
    }

    .b2b-stat.rose {
        background: linear-gradient(180deg, #e8f7ff 0%, #f3fbff 100%);
        border-color: #cfeeff;
    }

    .b2b-stat.sky {
        background: linear-gradient(180deg, rgba(22, 205, 199, 0.12) 0%, rgba(22, 205, 199, 0.04) 100%);
        border-color: rgba(22, 205, 199, 0.22);
    }

    .b2b-stat.mint {
        background: linear-gradient(180deg, #fff0f6 0%, #fff7fa 100%);
        border-color: #ffdbe8;
    }

    .b2b-stat.lavender {
        background: linear-gradient(180deg, #eafbf0 0%, #f5fdf8 100%);
        border-color: #d3f5df;
    }

    .b2b-stat-label {
        margin: 0;
        font-size: 0.76rem;
        font-weight: 700;
        color: #64748b;
    }

    .b2b-stat-value {
        margin: 1rem 0 0.35rem;
        font-size: 2rem;
        font-weight: 800;
        color: var(--b2b-ink);
        letter-spacing: -0.03em;
    }

    .b2b-stat-subtext {
        margin: 0;
        font-size: 0.82rem;
        color: #7b879d;
    }

    .b2b-split {
        display: grid;
        grid-template-columns: minmax(0, 1.9fr) minmax(320px, 0.95fr);
        gap: 0.9rem;
    }

    .b2b-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1rem 1rem 0.75rem;
        border-bottom: 1px solid #eef2f7;
    }

    .b2b-card-title {
        margin: 0;
        font-size: 1rem;
        font-weight: 800;
        color: var(--b2b-ink);
    }

    .b2b-card-subtitle {
        margin: 0.2rem 0 0;
        font-size: 0.8rem;
        color: #7b879d;
    }

    .b2b-list {
        padding: 0.4rem 1rem 1rem;
    }

    .b2b-launch-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 1fr auto auto;
        gap: 0.9rem;
        align-items: center;
        padding: 0.95rem 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .b2b-launch-row:last-child,
    .b2b-table tbody tr:last-child td,
    .b2b-risk-item:last-child,
    .b2b-detail-row:last-child {
        border-bottom: 0;
    }

    .b2b-avatar {
        width: 2rem;
        height: 2rem;
        border-radius: 0.75rem;
        background: #f3f4f6;
        color: #475569;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.76rem;
        font-weight: 800;
        flex: 0 0 auto;
    }

    .b2b-name {
        font-size: 0.92rem;
        font-weight: 800;
        color: var(--b2b-ink);
    }

    .b2b-subcopy {
        margin-top: 0.12rem;
        font-size: 0.76rem;
        color: #7b879d;
    }

    .b2b-progress {
        position: relative;
        height: 0.45rem;
        background: #e9eef6;
        border-radius: 999px;
        overflow: hidden;
    }

    .b2b-progress > span {
        position: absolute;
        inset: 0 auto 0 0;
        border-radius: inherit;
        background: #5b7cfa;
    }

    .b2b-progress-value {
        font-size: 0.76rem;
        font-weight: 800;
        color: #475569;
    }

    .b2b-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        border-radius: 999px;
        padding: 0.38rem 0.68rem;
        font-size: 0.73rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .tone-success {
        background: var(--b2b-success-bg);
        color: var(--b2b-success-text);
    }

    .tone-warning {
        background: var(--b2b-warning-bg);
        color: var(--b2b-warning-text);
    }

    .tone-danger {
        background: var(--b2b-danger-bg);
        color: var(--b2b-danger-text);
    }

    .tone-neutral {
        background: var(--b2b-neutral-bg);
        color: var(--b2b-neutral-text);
    }

    .b2b-risk-list,
    .b2b-detail-list {
        padding: 0.35rem 1rem 1rem;
    }

    .b2b-risk-item,
    .b2b-detail-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem;
        padding: 1rem 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .b2b-risk-arrow {
        color: #9aa5b5;
        font-size: 1.2rem;
        line-height: 1;
    }

    .b2b-link {
        border: 0;
        background: transparent;
        padding: 0;
        color: #111827;
        font-size: 0.8rem;
        font-weight: 700;
        cursor: pointer;
    }

    .b2b-partner-toolbar,
    .b2b-table-toolbar,
    .b2b-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem;
        padding: 0.95rem 1rem;
        margin-bottom: 0.85rem;
    }

    .b2b-banner {
        border: 1px solid #e5e7eb;
        background: #fff;
        border-radius: 16px;
    }

    .b2b-banner-icon {
        width: 2rem;
        height: 2rem;
        border-radius: 0.8rem;
        background: #0c0d1a;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
    }

    .b2b-search {
        min-width: min(100%, 20rem);
    }

    .b2b-table-wrap {
        overflow: auto;
    }

    .b2b-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 54rem;
    }

    .b2b-table thead th {
        padding: 0.9rem 1rem;
        font-size: 0.72rem;
        font-weight: 800;
        color: #7b879d;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-bottom: 1px solid #ecf0f6;
        white-space: nowrap;
    }

    .b2b-table tbody td {
        padding: 1rem;
        border-bottom: 1px solid #f1f5f9;
        color: #334155;
        font-size: 0.9rem;
        vertical-align: middle;
    }

    .b2b-table tbody tr {
        transition: background 0.18s ease, box-shadow 0.18s ease;
    }

    .b2b-table tbody tr:hover {
        background: #f8fbff;
    }

    .b2b-table tbody tr.selected {
        background: #f8fafc;
        box-shadow: inset 3px 0 0 #111827;
    }

    .b2b-readiness {
        display: flex;
        align-items: center;
        gap: 0.55rem;
    }

    .b2b-readiness .b2b-progress {
        width: 4.75rem;
    }

    .b2b-panel {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    .b2b-panel-body {
        padding: 1rem;
    }

    .b2b-inline-tabs,
    .b2b-chip-row {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        flex-wrap: wrap;
    }

    .b2b-inline-tab,
    .b2b-chip {
        border: 1px solid #e5e7eb;
        border-radius: 9999px;
        background: #fff;
        color: #374151;
        font-size: 0.78rem;
        font-weight: 700;
        padding: 0.55rem 0.72rem;
        cursor: pointer;
    }

    .b2b-inline-tab.active,
    .b2b-chip.active {
        background: #111827;
        border-color: #111827;
        color: #fff;
    }

    .b2b-detail-grid {
        margin-top: 0.85rem;
        border-top: 1px solid #f1f5f9;
    }

    .b2b-detail-row {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: start;
    }

    .b2b-detail-label {
        font-size: 0.76rem;
        font-weight: 700;
        color: #8b97aa;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .b2b-detail-value {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--b2b-ink);
        line-height: 1.55;
        text-align: right;
    }

    .b2b-contract-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.85rem;
        margin-bottom: 0.85rem;
    }

    .b2b-contract-card {
        padding: 1rem;
    }

    .b2b-contract-card h3 {
        margin: 0;
        font-size: 0.78rem;
        color: #7b879d;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .b2b-contract-card strong {
        display: block;
        margin-top: 0.85rem;
        font-size: 1.6rem;
        line-height: 1;
        color: var(--b2b-ink);
        letter-spacing: -0.03em;
    }

    .b2b-contract-card span {
        display: block;
        margin-top: 0.35rem;
        font-size: 0.82rem;
        color: #7b879d;
    }

    .b2b-empty {
        padding: 2rem 1rem;
        text-align: center;
        color: #7b879d;
        font-size: 0.9rem;
    }

    .b2b-decisions-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.85rem;
    }

    .b2b-decision-card {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
    }

    .b2b-decision-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
    }

    .b2b-decision-category {
        font-size: 0.7rem;
        font-weight: 800;
        color: #7b879d;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .b2b-decision-title {
        margin: 0;
        font-size: 1rem;
        font-weight: 800;
        color: var(--b2b-ink);
        line-height: 1.45;
    }

    .b2b-decision-copy {
        margin: 0;
        font-size: 0.85rem;
        color: #708097;
        line-height: 1.55;
    }

    .b2b-decision-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-top: auto;
    }

    .b2b-owner {
        font-size: 0.76rem;
        font-weight: 700;
        color: #8b97aa;
    }

    .b2b-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(4px);
        z-index: 70;
    }

    .b2b-modal {
        position: fixed;
        inset: 50% auto auto 50%;
        width: min(920px, calc(100vw - 2rem));
        transform: translate(-50%, -50%);
        z-index: 71;
        border-radius: 20px;
        border: 1px solid #e5e7eb;
        background: #fff;
        box-shadow: 0 30px 80px rgba(15, 23, 42, 0.24);
        overflow: hidden;
    }

    .b2b-modal-header,
    .b2b-modal-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.15rem;
        border-bottom: 1px solid #eef2f7;
    }

    .b2b-modal-footer {
        border-top: 1px solid #eef2f7;
        border-bottom: 0;
        background: #fff;
    }

    .b2b-modal-header button {
        border: 0;
        background: transparent;
        color: #94a3b8;
        font-size: 1.35rem;
        cursor: pointer;
    }

    .b2b-modal-body {
        padding: 1rem 1.15rem 1.25rem;
    }

    .b2b-modal-step-copy {
        margin: 0;
        font-size: 0.68rem;
        font-weight: 800;
        color: #9aa4b7;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .b2b-modal-title {
        margin: 0.35rem 0 0;
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--b2b-ink);
    }

    .b2b-stepper {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 1rem 0 1.15rem;
    }

    .b2b-step {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-width: 0;
    }

    .b2b-step-dot {
        width: 1.55rem;
        height: 1.55rem;
        border-radius: 999px;
        background: #e5e7eb;
        color: #94a3b8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        font-weight: 800;
        flex: 0 0 auto;
    }

    .b2b-step-label {
        min-width: 0;
        font-size: 0.8rem;
        font-weight: 700;
        color: #94a3b8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .b2b-step.active .b2b-step-dot,
    .b2b-step.completed .b2b-step-dot {
        background: #111827;
        color: #fff;
    }

    .b2b-step.active .b2b-step-label,
    .b2b-step.completed .b2b-step-label {
        color: #111827;
    }

    .b2b-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.95rem;
    }

    .b2b-check-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: 0.9rem;
    }

    .b2b-check-card {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 0.82rem 0.9rem;
        font-size: 0.86rem;
        font-weight: 700;
        color: #475569;
        background: #fff;
    }

    .b2b-check-card input {
        width: 1rem;
        height: 1rem;
        accent-color: #111827;
        flex: 0 0 auto;
    }

    .b2b-note {
        margin-top: 0.95rem;
        border: 1px solid #bde7d1;
        border-radius: 14px;
        background: #eaf8f0;
        color: #15803d;
        padding: 0.8rem 0.9rem;
        font-size: 0.82rem;
        font-weight: 700;
    }

    @media (max-width: 1280px) {
        .b2b-grid-6,
        .b2b-contract-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .b2b-decisions-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 1024px) {
        .b2b-header,
        .b2b-split,
        .b2b-filter-bar,
        .b2b-partner-toolbar,
        .b2b-table-toolbar,
        .b2b-banner,
        .b2b-modal-header,
        .b2b-modal-footer {
            grid-template-columns: 1fr;
            flex-direction: column;
            align-items: stretch;
        }

        .b2b-filter-bar {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .b2b-grid-6,
        .b2b-contract-grid,
        .b2b-form-grid,
        .b2b-check-grid,
        .b2b-decisions-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .b2b-launch-row {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .b2b-launch-row > :nth-child(3),
        .b2b-launch-row > :nth-child(4),
        .b2b-launch-row > :nth-child(5) {
            grid-column: 2;
        }
    }

    @media (max-width: 768px) {
        .b2b-page {
            padding: 0.25rem;
        }

        .b2b-grid-6,
        .b2b-contract-grid,
        .b2b-filter-bar,
        .b2b-form-grid,
        .b2b-check-grid,
        .b2b-decisions-grid {
            grid-template-columns: 1fr;
        }

        .b2b-detail-row {
            grid-template-columns: 1fr;
            gap: 0.35rem;
        }

        .b2b-detail-value {
            text-align: left;
        }

        .b2b-modal {
            width: min(920px, calc(100vw - 1rem));
        }

        .b2b-filter-actions {
            width: 100%;
            justify-content: stretch;
        }

        .b2b-filter-actions .b2b-btn {
            flex: 1 1 0;
        }

        .b2b-stepper {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
</style>
@endpush

<x-filament-panels::page>
    <div
        class="b2b-page"
        x-data="window.b2bPartnerOperations({ payload: @js($payload), endpoints: @js($endpoints) })"
        x-init="init()"
    >
        <div class="b2b-shell">
            <div
                class="b2b-alert"
                :class="alert.type"
                x-show="alert.message"
                x-transition.opacity.duration.200ms
                x-cloak
            >
                <span x-text="alert.message"></span>
                <button type="button" @click="dismissAlert()">×</button>
            </div>

            <div class="b2b-section-status" x-show="loading.tab" x-transition.opacity.duration.200ms x-cloak>
                <span class="b2b-section-spinner"></span>
                <span x-text="loadingMessage()"></span>
            </div>

            <div class="b2b-header">
                <div>
                    <p class="b2b-crumb">Operations / Partner Integrations</p>
                    <h1 class="b2b-title">B2B Partner Operations</h1>
                    <p class="b2b-subtitle">Configure, launch and govern entitlements sold through external partners.</p>
                </div>

                <div class="b2b-actions">
                    <button type="button" class="b2b-btn b2b-btn-secondary" @click="flash('Readiness export prepared for the partner launch review pack.', 'info')">
                        Export readiness
                    </button>
                    <button type="button" class="b2b-btn b2b-btn-primary" :disabled="loading.wizardSubmit" @click="openWizard()">
                        <span x-text="loading.wizardSubmit ? 'Saving...' : 'Onboard partner'"></span>
                    </button>
                </div>
            </div>

            <div class="b2b-tabs">
                <template x-for="tab in tabs" :key="tab.id">
                    <button
                        type="button"
                        class="b2b-tab"
                        :class="{ 'active': currentTab === tab.id }"
                        @click="activateTab(tab.id)"
                    >
                        <span x-text="tab.label"></span>
                        <span class="b2b-tab-count" x-show="tab.count !== null" x-text="tab.count"></span>
                    </button>
                </template>
            </div>

            <section x-show="currentTab === 'control-room'" x-cloak>
                <div class="b2b-filter-bar b2b-surface">
                    <div class="b2b-field">
                        <label>Date Range</label>
                        <select class="b2b-select" x-model="filters.dateRange">
                            <template x-for="option in filterOptions.dateRanges" :key="option">
                                <option x-text="option"></option>
                            </template>
                        </select>
                    </div>
                    <div class="b2b-field">
                        <label>Partner</label>
                        <select class="b2b-select" x-model="filters.partner">
                            <template x-for="option in filterOptions.partners" :key="option">
                                <option x-text="option"></option>
                            </template>
                        </select>
                    </div>
                    <div class="b2b-field">
                        <label>Integration Model</label>
                        <select class="b2b-select" x-model="filters.model">
                            <template x-for="option in filterOptions.models" :key="option">
                                <option x-text="option"></option>
                            </template>
                        </select>
                    </div>
                    <div class="b2b-field">
                        <label>Environment</label>
                        <select class="b2b-select" x-model="filters.environment">
                            <template x-for="option in filterOptions.environments" :key="option">
                                <option x-text="option"></option>
                            </template>
                        </select>
                    </div>
                    <div class="b2b-filter-actions">
                        <button type="button" class="b2b-btn b2b-btn-dark" :disabled="loading.search || loading.reset || loading.tab" @click="handleSearch()">
                            <span x-text="loading.search ? 'Searching...' : 'Search'"></span>
                        </button>
                        <button type="button" class="b2b-btn b2b-btn-ghost" :disabled="loading.search || loading.reset || loading.tab" @click="handleReset()">
                            <span x-text="loading.reset ? 'Resetting...' : 'Reset'"></span>
                        </button>
                    </div>
                </div>

                <div class="b2b-grid-6">
                    <template x-for="card in summaryCards" :key="card.label">
                        <div class="b2b-stat b2b-surface" :class="card.tone">
                            <p class="b2b-stat-label" x-text="card.label"></p>
                            <div class="b2b-stat-value" x-text="card.value"></div>
                            <p class="b2b-stat-subtext" x-text="card.subtext"></p>
                        </div>
                    </template>
                </div>

                <div class="b2b-split">
                    <div class="b2b-surface">
                        <div class="b2b-card-header">
                            <div>
                                <h2 class="b2b-card-title">Partner launch readiness</h2>
                                <p class="b2b-card-subtitle">Contract, security, UAT and operational sign-off</p>
                            </div>
                            <button type="button" class="b2b-link" @click="activateTab('partner-setup')">Open partner setup</button>
                        </div>

                        <div class="b2b-list">
                            <template x-for="item in launchReadiness" :key="item.code">
                                <div class="b2b-launch-row">
                                    <span class="b2b-avatar" x-text="item.initials"></span>
                                    <div>
                                        <div class="b2b-name" x-text="item.name"></div>
                                        <div class="b2b-subcopy" x-text="item.subtitle"></div>
                                    </div>
                                    <div class="b2b-progress">
                                        <span :style="`width: ${item.progress}%`"></span>
                                    </div>
                                    <div class="b2b-progress-value" x-text="`${item.progress}%`"></div>
                                    <span class="b2b-pill" :class="toneClass(item.status_tone)" x-text="item.status"></span>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="b2b-surface">
                        <div class="b2b-card-header">
                            <div>
                                <h2 class="b2b-card-title">Risk queue</h2>
                                <p class="b2b-card-subtitle">Actions that can block launch</p>
                            </div>
                        </div>

                        <div class="b2b-risk-list">
                            <template x-for="risk in riskQueue" :key="risk.title">
                                <div class="b2b-risk-item">
                                    <div>
                                        <span class="b2b-pill" :class="toneClass(risk.severity_tone)" x-text="risk.severity"></span>
                                        <div class="b2b-name" style="margin-top: 0.7rem;" x-text="risk.title"></div>
                                        <div class="b2b-subcopy" x-text="risk.subtitle"></div>
                                    </div>
                                    <span class="b2b-risk-arrow">›</span>
                                </div>
                            </template>

                            <button type="button" class="b2b-link" @click="activateTab('decisions')">Review all decisions →</button>
                        </div>
                    </div>
                </div>
            </section>

            <section x-show="currentTab === 'partner-setup'" x-cloak>
                <div class="b2b-partner-toolbar b2b-surface">
                    <input
                        type="text"
                        class="b2b-input b2b-search"
                        placeholder="Search partner, code or market"
                        x-model.debounce.200ms="partnerSearch"
                    >
                    <button type="button" class="b2b-btn b2b-btn-primary" :disabled="loading.wizardSubmit" @click="openWizard()">New partner</button>
                </div>

                <div class="b2b-split">
                    <div class="b2b-surface">
                        <div class="b2b-table-wrap">
                            <table class="b2b-table">
                                <thead>
                                    <tr>
                                        <th>Partner</th>
                                        <th>Market</th>
                                        <th>Integration model</th>
                                        <th>Source of truth</th>
                                        <th>Readiness</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template x-for="partner in filteredPartners()" :key="partner.code">
                                        <tr
                                            :class="{ 'selected': selectedPartnerCode === partner.code }"
                                            @click="selectPartner(partner.code)"
                                            style="cursor: pointer;"
                                        >
                                            <td>
                                                <div class="b2b-name" x-text="partner.name"></div>
                                                <div class="b2b-subcopy" x-text="partner.alias"></div>
                                            </td>
                                            <td x-text="partner.market"></td>
                                            <td x-text="partner.integration_model"></td>
                                            <td x-text="partner.source_of_truth"></td>
                                            <td>
                                                <div class="b2b-readiness">
                                                    <div class="b2b-progress">
                                                        <span :style="`width: ${partner.readiness}%`"></span>
                                                    </div>
                                                    <span class="b2b-progress-value" x-text="`${partner.readiness}%`"></span>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="b2b-pill" :class="toneClass(partner.status_tone)" x-text="partner.status"></span>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="b2b-surface b2b-panel">
                        <template x-if="selectedPartner()">
                            <div>
                                <div class="b2b-card-header">
                                    <div style="display: flex; align-items: center; gap: 0.85rem;">
                                        <span class="b2b-avatar" x-text="selectedPartner().initials"></span>
                                        <div>
                                            <h2 class="b2b-card-title" x-text="selectedPartner().name"></h2>
                                            <p class="b2b-card-subtitle" x-text="selectedPartner().alias"></p>
                                        </div>
                                    </div>
                                    <span class="b2b-pill" :class="toneClass(selectedPartner().status_tone)" x-text="selectedPartner().status"></span>
                                </div>

                                <div class="b2b-panel-body">
                                    <div class="b2b-inline-tabs">
                                        <template x-for="tab in partnerDetailTabs" :key="tab.id">
                                            <button
                                                type="button"
                                                class="b2b-inline-tab"
                                                :class="{ 'active': selectedPartnerDetailTab === tab.id }"
                                                @click="selectedPartnerDetailTab = tab.id"
                                                x-text="tab.label"
                                            ></button>
                                        </template>
                                    </div>

                                    <div class="b2b-detail-grid">
                                        <template x-for="field in selectedPartnerFields()" :key="field.label">
                                            <div class="b2b-detail-row">
                                                <div class="b2b-detail-label" x-text="field.label"></div>
                                                <div class="b2b-detail-value" x-text="field.value"></div>
                                            </div>
                                        </template>
                                    </div>

                                    <div class="b2b-actions" style="justify-content: flex-start; margin-top: 1rem;">
                                        <button type="button" class="b2b-btn b2b-btn-secondary" @click="flash(`${selectedPartner().name} cloned into sandbox review queue.`, 'info')">
                                            Clone to sandbox
                                        </button>
                                        <button type="button" class="b2b-btn b2b-btn-primary" @click="flash(`${selectedPartner().name} configuration passed UI validation checks.`, 'success')">
                                            Validate configuration
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </section>

            <section x-show="currentTab === 'api-contracts'" x-cloak>
                <div class="b2b-contract-grid">
                    <template x-for="card in apiContractsOverview" :key="card.label">
                        <div class="b2b-contract-card b2b-surface">
                            <h3 x-text="card.label"></h3>
                            <strong x-text="card.value"></strong>
                            <span x-text="card.subtext"></span>
                        </div>
                    </template>
                </div>

                <div class="b2b-table-toolbar b2b-surface">
                    <div>
                        <h2 class="b2b-card-title">Contract registry</h2>
                        <p class="b2b-card-subtitle">Endpoint versions, environments and contract readiness</p>
                    </div>
                    <div class="b2b-actions">
                        <button type="button" class="b2b-btn b2b-btn-secondary" @click="flash('Schema bundle exported for partner engineering review.', 'info')">Export schema pack</button>
                        <button type="button" class="b2b-btn b2b-btn-primary" @click="flash('Sandbox validation checklist shared with the API team.', 'success')">Validate samples</button>
                    </div>
                </div>

                <div class="b2b-surface">
                    <div class="b2b-table-wrap">
                        <table class="b2b-table">
                            <thead>
                                <tr>
                                    <th>Partner</th>
                                    <th>Endpoint</th>
                                    <th>Method</th>
                                    <th>Version</th>
                                    <th>Schema</th>
                                    <th>Environment</th>
                                    <th>Status</th>
                                    <th>Updated</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="contract in contracts" :key="`${contract.partner}-${contract.endpoint}-${contract.version}`">
                                    <tr>
                                        <td x-text="contract.partner"></td>
                                        <td><span class="b2b-name" x-text="contract.endpoint"></span></td>
                                        <td x-text="contract.method"></td>
                                        <td x-text="contract.version"></td>
                                        <td x-text="contract.schema"></td>
                                        <td x-text="contract.mode"></td>
                                        <td><span class="b2b-pill" :class="toneClass(contract.status_tone)" x-text="contract.status"></span></td>
                                        <td x-text="contract.updated_at"></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

            <section x-show="currentTab === 'transactions'" x-cloak>
                <div class="b2b-filter-bar b2b-surface">
                    <div class="b2b-field">
                        <label>Date Range</label>
                        <select class="b2b-select" x-model="filters.dateRange">
                            <template x-for="option in filterOptions.dateRanges" :key="option">
                                <option x-text="option"></option>
                            </template>
                        </select>
                    </div>
                    <div class="b2b-field">
                        <label>Partner</label>
                        <select class="b2b-select" x-model="filters.partner">
                            <template x-for="option in filterOptions.partners" :key="option">
                                <option x-text="option"></option>
                            </template>
                        </select>
                    </div>
                    <div class="b2b-field">
                        <label>Integration Model</label>
                        <select class="b2b-select" x-model="filters.model">
                            <template x-for="option in filterOptions.models" :key="option">
                                <option x-text="option"></option>
                            </template>
                        </select>
                    </div>
                    <div class="b2b-field">
                        <label>Environment</label>
                        <select class="b2b-select" x-model="filters.environment">
                            <template x-for="option in filterOptions.environments" :key="option">
                                <option x-text="option"></option>
                            </template>
                        </select>
                    </div>
                    <div class="b2b-filter-actions">
                        <button type="button" class="b2b-btn b2b-btn-dark" :disabled="loading.search || loading.reset || loading.tab" @click="handleSearch()">
                            <span x-text="loading.search ? 'Searching...' : 'Search'"></span>
                        </button>
                        <button type="button" class="b2b-btn b2b-btn-ghost" :disabled="loading.search || loading.reset || loading.tab" @click="handleReset()">
                            <span x-text="loading.reset ? 'Resetting...' : 'Reset'"></span>
                        </button>
                    </div>
                </div>

                <div class="b2b-surface">
                    <div class="b2b-card-header">
                        <div class="b2b-inline-tabs">
                            <template x-for="view in transactionViews" :key="view.id">
                                <button
                                    type="button"
                                    class="b2b-inline-tab"
                                    :class="{ 'active': currentTransactionView === view.id }"
                                    @click="currentTransactionView = view.id"
                                    x-text="view.label"
                                ></button>
                            </template>
                        </div>

                        <select class="b2b-select" style="width: 11rem;" x-model="transactionOutcome">
                            <option value="All outcomes">All outcomes</option>
                            <option value="Succeeded">Succeeded</option>
                            <option value="Pending">Pending</option>
                            <option value="Failed">Failed</option>
                        </select>
                    </div>

                    <div class="b2b-table-wrap">
                        <table class="b2b-table">
                            <thead>
                                <tr>
                                    <th>Request ID</th>
                                    <th>Partner / API</th>
                                    <th>External transaction</th>
                                    <th>Customer reference</th>
                                    <th>Pack</th>
                                    <th>Outcome</th>
                                    <th>Latency</th>
                                    <th>Received</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="row in filteredTransactions()" :key="row.request_id">
                                    <tr>
                                        <td x-text="row.request_id"></td>
                                        <td>
                                            <div class="b2b-name" x-text="row.partner"></div>
                                            <div class="b2b-subcopy" x-text="row.api"></div>
                                        </td>
                                        <td x-text="row.external"></td>
                                        <td x-text="row.customer"></td>
                                        <td x-text="row.pack"></td>
                                        <td><span class="b2b-pill" :class="toneClass(row.outcome_tone)" x-text="row.outcome"></span></td>
                                        <td x-text="row.latency"></td>
                                        <td x-text="row.received"></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

            <section x-show="currentTab === 'reconciliation'" x-cloak>
                <div class="b2b-grid-6" style="grid-template-columns: repeat(4, minmax(0, 1fr));">
                    <template x-for="card in reconciliationStats" :key="card.label">
                        <div class="b2b-contract-card b2b-surface">
                            <h3 x-text="card.label"></h3>
                            <strong x-text="card.value"></strong>
                            <span x-text="card.subtext"></span>
                        </div>
                    </template>
                </div>

                <div class="b2b-table-toolbar b2b-surface">
                    <div>
                        <h2 class="b2b-card-title">State mismatches</h2>
                        <p class="b2b-card-subtitle">Partner billing state compared with SMS entitlement state</p>
                    </div>
                    <button type="button" class="b2b-btn b2b-btn-dark" @click="flash('Reconciliation run queued. Latest diff will refresh in the control room.', 'success')">
                        Run reconciliation
                    </button>
                </div>

                <div class="b2b-surface">
                    <div class="b2b-table-wrap">
                        <table class="b2b-table">
                            <thead>
                                <tr>
                                    <th>Partner / subscriber</th>
                                    <th>Partner state</th>
                                    <th>SMS state</th>
                                    <th>Authority</th>
                                    <th>Exposure</th>
                                    <th>Reason</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="row in reconciliationRows" :key="`${row.partner}-${row.subscriber}`">
                                    <tr>
                                        <td>
                                            <div class="b2b-name" x-text="row.partner"></div>
                                            <div class="b2b-subcopy" x-text="row.subscriber"></div>
                                        </td>
                                        <td><span class="b2b-pill" :class="toneClass(row.partner_tone)" x-text="row.partner_state"></span></td>
                                        <td><span class="b2b-pill" :class="toneClass(row.sms_tone)" x-text="row.sms_state"></span></td>
                                        <td x-text="row.authority"></td>
                                        <td x-text="row.exposure"></td>
                                        <td x-text="row.reason"></td>
                                        <td><button type="button" class="b2b-link" @click="flash(`Opened case review for ${row.partner}.`, 'info')">Review</button></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

            <section x-show="currentTab === 'decisions'" x-cloak>
                <div class="b2b-banner">
                    <div style="display: flex; align-items: center; gap: 0.85rem;">
                        <span class="b2b-banner-icon">?</span>
                        <div>
                            <h2 class="b2b-card-title">Discovery &amp; decision register</h2>
                            <p class="b2b-card-subtitle">Resolve these policy questions before finalizing API contracts or enabling production writes.</p>
                        </div>
                    </div>

                    <button type="button" class="b2b-btn b2b-btn-secondary" @click="flash('Decision checklist exported for steering committee review.', 'info')">
                        Export checklist
                    </button>
                </div>

                <div class="b2b-chip-row" style="margin-bottom: 0.85rem;">
                    <template x-for="category in decisionCategories" :key="category">
                        <button
                            type="button"
                            class="b2b-chip"
                            :class="{ 'active': currentDecisionCategory === category }"
                            @click="currentDecisionCategory = category"
                            x-text="category"
                        ></button>
                    </template>
                </div>

                <div class="b2b-decisions-grid">
                    <template x-for="decision in filteredDecisions()" :key="decision.id">
                        <div class="b2b-decision-card b2b-surface">
                            <div class="b2b-decision-meta">
                                <span class="b2b-decision-category" x-text="decision.category"></span>
                                <span class="b2b-pill" :class="toneClass(decision.severity_tone)" x-text="decision.severity"></span>
                            </div>

                            <div>
                                <h3 class="b2b-decision-title" x-text="decision.question"></h3>
                                <p class="b2b-decision-copy" x-text="decision.description"></p>
                            </div>

                            <div class="b2b-form-field">
                                <label>Working decision</label>
                                <select class="b2b-select">
                                    <option>Select an option</option>
                                    <option>Approve</option>
                                    <option>Needs escalation</option>
                                    <option>Partner owns it</option>
                                    <option>Owns it</option>
                                </select>
                            </div>

                            <div class="b2b-decision-footer">
                                <span class="b2b-owner" x-text="`Owner: ${decision.owner}`"></span>
                                <button type="button" class="b2b-link" :disabled="loading.decisionId === decision.id" @click="markDecisionResolved(decision.id)">
                                    <span x-text="loading.decisionId === decision.id ? 'Resolving...' : 'Mark resolved'"></span>
                                </button>
                            </div>
                        </div>
                    </template>
                </div>
            </section>
        </div>

        <div x-show="showWizard" x-cloak>
            <div class="b2b-modal-backdrop" x-show="showWizard" x-transition.opacity.duration.180ms @click="closeWizard()"></div>

            <div class="b2b-modal" x-show="showWizard" x-transition.scale.duration.180ms @click.outside="closeWizard()" @keydown.escape.window="closeWizard()">
                <div class="b2b-modal-header">
                    <div>
                        <p class="b2b-modal-step-copy" x-text="`Onboard partner · step ${wizardStep} of ${wizardSteps.length}`"></p>
                        <h2 class="b2b-modal-title" x-text="wizardSteps[wizardStep - 1].title"></h2>
                    </div>
                    <button type="button" @click="closeWizard()">×</button>
                </div>

                <div class="b2b-modal-body">
                        <div class="b2b-stepper">
                            <template x-for="(step, index) in wizardSteps" :key="step.id">
                                <div
                                    class="b2b-step"
                                    :class="{
                                        'active': wizardStep === index + 1,
                                        'completed': wizardStep > index + 1
                                    }"
                                >
                                    <span class="b2b-step-dot" x-text="index + 1"></span>
                                    <span class="b2b-step-label" x-text="step.label"></span>
                                </div>
                            </template>
                        </div>

                        <div x-show="wizardStep === 1" x-cloak>
                            <div class="b2b-form-grid">
                                <div class="b2b-form-field">
                                    <label>Partner code</label>
                                    <input type="text" class="b2b-input" x-model="wizard.business.partner_code">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Display name</label>
                                    <input type="text" class="b2b-input" x-model="wizard.business.display_name">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Legal entity</label>
                                    <input type="text" class="b2b-input" x-model="wizard.business.legal_entity">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Partner category</label>
                                    <select class="b2b-select" x-model="wizard.business.partner_category">
                                        <template x-for="option in wizardOptions.partner_categories" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="b2b-form-field">
                                    <label>Country / market</label>
                                    <select class="b2b-select" x-model="wizard.business.country_market">
                                        <template x-for="option in wizardOptions.countries" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="b2b-form-field">
                                    <label>Timezone</label>
                                    <select class="b2b-select" x-model="wizard.business.timezone">
                                        <template x-for="option in wizardOptions.timezones" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="b2b-form-field">
                                    <label>Settlement currency</label>
                                    <select class="b2b-select" x-model="wizard.business.settlement_currency">
                                        <template x-for="option in wizardOptions.currencies" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="b2b-form-field">
                                    <label>Business owner</label>
                                    <input type="text" class="b2b-input" x-model="wizard.business.business_owner">
                                </div>
                            </div>
                        </div>

                        <div x-show="wizardStep === 2" x-cloak>
                            <div class="b2b-form-grid">
                                <div class="b2b-form-field">
                                    <label>Primary customer key</label>
                                    <select class="b2b-select" x-model="wizard.identity.primary_customer_key">
                                        <template x-for="option in wizardOptions.primary_customer_keys" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="b2b-form-field">
                                    <label>Identity collision policy</label>
                                    <select class="b2b-select" x-model="wizard.identity.identity_collision_policy">
                                        <template x-for="option in wizardOptions.collision_policies" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="b2b-form-field">
                                    <label>Allowed pack IDs</label>
                                    <input type="text" class="b2b-input" x-model="wizard.identity.allowed_pack_ids">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Entitlement start</label>
                                    <select class="b2b-select" x-model="wizard.identity.entitlement_start">
                                        <template x-for="option in wizardOptions.entitlement_starts" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="b2b-form-field">
                                    <label>Renewal rule</label>
                                    <select class="b2b-select" x-model="wizard.identity.renewal_rule">
                                        <template x-for="option in wizardOptions.renewal_rules" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="b2b-form-field">
                                    <label>Cancellation effect</label>
                                    <select class="b2b-select" x-model="wizard.identity.cancellation_effect">
                                        <template x-for="option in wizardOptions.cancellation_effects" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                            </div>

                            <div class="b2b-check-grid">
                                <label class="b2b-check-card"><input type="checkbox" x-model="wizard.identity.mobile_required"> Mobile required</label>
                                <label class="b2b-check-card"><input type="checkbox" x-model="wizard.identity.email_required"> Email required</label>
                                <label class="b2b-check-card"><input type="checkbox" x-model="wizard.identity.partner_customer_id_required"> Partner customer ID required</label>
                                <label class="b2b-check-card"><input type="checkbox" x-model="wizard.identity.device_id_required"> Device ID required</label>
                                <label class="b2b-check-card"><input type="checkbox" x-model="wizard.identity.allow_account_linking"> Allow existing account linking</label>
                                <label class="b2b-check-card"><input type="checkbox" x-model="wizard.identity.require_customer_consent"> Require customer consent</label>
                            </div>
                        </div>

                        <div x-show="wizardStep === 3" x-cloak>
                            <div class="b2b-form-grid">
                                <div class="b2b-form-field">
                                    <label>Authentication method</label>
                                    <select class="b2b-select" x-model="wizard.security.auth_method">
                                        <template x-for="option in wizardOptions.auth_methods" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="b2b-form-field">
                                    <label>Client ID</label>
                                    <input type="text" class="b2b-input" x-model="wizard.security.client_id">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Token URL</label>
                                    <input type="text" class="b2b-input" x-model="wizard.security.token_url">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Allowed CIDRs</label>
                                    <input type="text" class="b2b-input" x-model="wizard.security.allowed_cidrs">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Request signature header</label>
                                    <input type="text" class="b2b-input" x-model="wizard.security.signature_header">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Replay window (seconds)</label>
                                    <input type="text" class="b2b-input" x-model="wizard.security.replay_window">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Rate limit / minute</label>
                                    <input type="text" class="b2b-input" x-model="wizard.security.rate_limit">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Secret rotation (days)</label>
                                    <input type="text" class="b2b-input" x-model="wizard.security.secret_rotation_days">
                                </div>
                            </div>

                            <div class="b2b-note">Secrets are generated after approval and never displayed again in full.</div>
                        </div>

                        <div x-show="wizardStep === 4" x-cloak>
                            <div class="b2b-form-grid">
                                <div class="b2b-form-field">
                                    <label>Integration model</label>
                                    <select class="b2b-select" x-model="wizard.lifecycle.integration_model">
                                        <template x-for="option in wizardOptions.integration_models" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="b2b-form-field">
                                    <label>Subscription source of truth</label>
                                    <select class="b2b-select" x-model="wizard.lifecycle.source_of_truth">
                                        <template x-for="option in wizardOptions.source_of_truths" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="b2b-form-field">
                                    <label>Webhook callback URL</label>
                                    <input type="text" class="b2b-input" x-model="wizard.lifecycle.webhook_callback_url">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Timeout (ms)</label>
                                    <input type="text" class="b2b-input" x-model="wizard.lifecycle.timeout_ms">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Retry schedule</label>
                                    <input type="text" class="b2b-input" x-model="wizard.lifecycle.retry_schedule">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Max attempts</label>
                                    <input type="text" class="b2b-input" x-model="wizard.lifecycle.max_attempts">
                                </div>
                                <div class="b2b-form-field">
                                    <label>Out-of-order policy</label>
                                    <select class="b2b-select" x-model="wizard.lifecycle.out_of_order_policy">
                                        <template x-for="option in wizardOptions.out_of_order_policies" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="b2b-form-field">
                                    <label>Production approval</label>
                                    <select class="b2b-select" x-model="wizard.lifecycle.production_approval">
                                        <template x-for="option in wizardOptions.production_approvals" :key="option">
                                            <option x-text="option"></option>
                                        </template>
                                    </select>
                                </div>
                            </div>

                            <div class="b2b-check-grid">
                                <label class="b2b-check-card"><input type="checkbox" x-model="wizard.lifecycle.opt_in_events"> Opt-in events</label>
                                <label class="b2b-check-card"><input type="checkbox" x-model="wizard.lifecycle.opt_out_events"> Opt-out events</label>
                                <label class="b2b-check-card"><input type="checkbox" x-model="wizard.lifecycle.suspend_events"> Suspend events</label>
                                <label class="b2b-check-card"><input type="checkbox" x-model="wizard.lifecycle.resume_events"> Resume events</label>
                                <label class="b2b-check-card"><input type="checkbox" x-model="wizard.lifecycle.daily_reconciliation"> Daily reconciliation</label>
                                <label class="b2b-check-card"><input type="checkbox" x-model="wizard.lifecycle.dead_letter_alerts"> Dead-letter alerts</label>
                            </div>
                        </div>
                </div>

                <div class="b2b-modal-footer">
                    <div class="b2b-actions" style="justify-content: flex-start;">
                        <button type="button" class="b2b-btn b2b-btn-ghost" x-show="wizardStep === 1" :disabled="loading.wizardSubmit" @click="closeWizard()">Cancel</button>
                        <button type="button" class="b2b-btn b2b-btn-ghost" x-show="wizardStep > 1" :disabled="loading.wizardSubmit" @click="previousWizard()">Back</button>
                    </div>

                    <div class="b2b-actions">
                        <button type="button" class="b2b-btn b2b-btn-primary" x-show="wizardStep < wizardSteps.length" :disabled="loading.wizardSubmit" @click="nextWizard()">Continue</button>
                        <button type="button" class="b2b-btn b2b-btn-primary" x-show="wizardStep === wizardSteps.length" :disabled="loading.wizardSubmit" @click="createDraftPartner()">
                            <span x-text="loading.wizardSubmit ? 'Creating...' : 'Create draft partner'"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-filament-panels::page>

@push('scripts')
<script>
    window.b2bPartnerOperations = function ({ payload, endpoints }) {
        const clone = (value) => JSON.parse(JSON.stringify(value ?? null));
        const defaultFilters = {
            dateRange: payload?.filterOptions?.dateRanges?.[2] ?? 'Last 30 days',
            partner: payload?.filterOptions?.partners?.[0] ?? 'All Partners',
            model: payload?.filterOptions?.models?.[0] ?? 'All Models',
            environment: payload?.filterOptions?.environments?.[0] ?? 'All',
        };

        return {
            endpoints: clone(endpoints ?? {}),
            tabs: clone(payload?.tabs ?? []),
            filterOptions: clone(payload?.filterOptions ?? {}),
            summaryCards: clone(payload?.summaryCards ?? []),
            launchReadiness: clone(payload?.launchReadiness ?? []),
            riskQueue: clone(payload?.riskQueue ?? []),
            partners: clone(payload?.partners ?? []),
            partnerDetailTabs: clone(payload?.partnerDetailTabs ?? []),
            apiContractsOverview: clone(payload?.apiContractsOverview ?? []),
            contracts: clone(payload?.contracts ?? []),
            transactionViews: clone(payload?.transactionViews ?? []),
            transactions: clone(payload?.transactions ?? []),
            reconciliationStats: clone(payload?.reconciliationStats ?? []),
            reconciliationRows: clone(payload?.reconciliationRows ?? []),
            decisionCategories: clone(payload?.decisionCategories ?? []),
            decisions: clone(payload?.decisions ?? []),
            wizardOptions: clone(payload?.wizardOptions ?? {}),
            wizardDefaults: clone(payload?.wizardDefaults ?? {}),
            currentTab: 'control-room',
            currentTransactionView: 'api-requests',
            currentDecisionCategory: 'All',
            selectedPartnerCode: (payload?.partners ?? [])[0]?.code ?? null,
            selectedPartnerDetailTab: 'business',
            partnerSearch: '',
            transactionOutcome: 'All outcomes',
            showWizard: false,
            wizardStep: 1,
            wizardSteps: [
                { id: 'business', label: 'Business', title: 'Business configuration' },
                { id: 'identity', label: 'Identity & packs', title: 'Identity & packs configuration' },
                { id: 'security', label: 'Security', title: 'Security configuration' },
                { id: 'lifecycle', label: 'Lifecycle', title: 'Lifecycle configuration' },
            ],
            wizard: clone(payload?.wizardDefaults ?? {}),
            filters: clone(defaultFilters),
            defaultFilters,
            alert: {
                message: '',
                type: 'info',
            },
            loading: {
                tab: '',
                search: false,
                reset: false,
                wizardSubmit: false,
                decisionId: null,
            },
            draftPartners: [],
            draftLaunchReadiness: [],
            resolvedDecisionIds: [],

            init() {
                this.applyPayload(payload);
                this.refreshData({ silent: true, reason: 'init' });
            },

            toneClass(tone) {
                return {
                    success: 'tone-success',
                    warning: 'tone-warning',
                    danger: 'tone-danger',
                    neutral: 'tone-neutral',
                    info: 'tone-neutral',
                }[tone] ?? 'tone-neutral';
            },

            loadingMessage() {
                const label = this.tabs.find((tab) => tab.id === this.loading.tab)?.label ?? 'section';
                return `Refreshing ${label} via AJAX...`;
            },

            flash(message, type = 'info') {
                this.alert = { message, type };
                window.clearTimeout(this.alertTimer);
                this.alertTimer = window.setTimeout(() => this.dismissAlert(), 3200);
            },

            dismissAlert() {
                this.alert = { message: '', type: 'info' };
            },

            requestHeaders() {
                const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '';

                return {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                    'X-Requested-With': 'XMLHttpRequest',
                };
            },

            currentPayloadSnapshot() {
                return {
                    tabs: clone(this.tabs),
                    filterOptions: clone(this.filterOptions),
                    summaryCards: clone(this.summaryCards),
                    launchReadiness: clone(this.launchReadiness),
                    riskQueue: clone(this.riskQueue),
                    partners: clone(this.partners),
                    partnerDetailTabs: clone(this.partnerDetailTabs),
                    apiContractsOverview: clone(this.apiContractsOverview),
                    contracts: clone(this.contracts),
                    transactionViews: clone(this.transactionViews),
                    transactions: clone(this.transactions),
                    reconciliationStats: clone(this.reconciliationStats),
                    reconciliationRows: clone(this.reconciliationRows),
                    decisionCategories: clone(this.decisionCategories),
                    decisions: clone(this.decisions),
                    wizardOptions: clone(this.wizardOptions),
                    wizardDefaults: clone(this.wizardDefaults),
                };
            },

            applyPayload(nextPayload) {
                const merged = this.mergeLocalState(clone(nextPayload ?? {}));

                this.tabs = clone(merged.tabs ?? []);
                this.filterOptions = clone(merged.filterOptions ?? {});
                this.summaryCards = clone(merged.summaryCards ?? []);
                this.launchReadiness = clone(merged.launchReadiness ?? []);
                this.riskQueue = clone(merged.riskQueue ?? []);
                this.partners = clone(merged.partners ?? []);
                this.partnerDetailTabs = clone(merged.partnerDetailTabs ?? []);
                this.apiContractsOverview = clone(merged.apiContractsOverview ?? []);
                this.contracts = clone(merged.contracts ?? []);
                this.transactionViews = clone(merged.transactionViews ?? []);
                this.transactions = clone(merged.transactions ?? []);
                this.reconciliationStats = clone(merged.reconciliationStats ?? []);
                this.reconciliationRows = clone(merged.reconciliationRows ?? []);
                this.decisionCategories = clone(merged.decisionCategories ?? []);
                this.decisions = clone(merged.decisions ?? []);
                this.wizardOptions = clone(merged.wizardOptions ?? {});
                this.wizardDefaults = clone(merged.wizardDefaults ?? this.wizardDefaults);

                if (!this.partners.some((partner) => partner.code === this.selectedPartnerCode)) {
                    this.selectedPartnerCode = this.partners[0]?.code ?? null;
                }

                if (!this.partnerDetailTabs.some((tab) => tab.id === this.selectedPartnerDetailTab)) {
                    this.selectedPartnerDetailTab = this.partnerDetailTabs[0]?.id ?? 'business';
                }
            },

            mergeLocalState(nextPayload) {
                const payloadCopy = clone(nextPayload ?? {});
                const visibleDraftPartners = this.draftPartners.filter((partner) => {
                    return this.matchesLocalPartnerSelection(partner)
                        && this.matchesLocalModelSelection(partner)
                        && this.matchesLocalEnvironmentSelection(partner.status);
                });
                const draftCodes = new Set(visibleDraftPartners.map((partner) => partner.code));

                if (draftCodes.size > 0) {
                    payloadCopy.partners = [
                        ...clone(visibleDraftPartners),
                        ...(payloadCopy.partners ?? []).filter((partner) => !draftCodes.has(partner.code)),
                    ];
                    payloadCopy.launchReadiness = [
                        ...clone(this.draftLaunchReadiness.filter((item) => draftCodes.has(item.code))),
                        ...(payloadCopy.launchReadiness ?? []).filter((item) => !draftCodes.has(item.code)),
                    ];
                }

                if (this.resolvedDecisionIds.length > 0) {
                    const resolvedIds = new Set(this.resolvedDecisionIds);
                    payloadCopy.decisions = (payloadCopy.decisions ?? []).map((decision) => {
                        if (!resolvedIds.has(decision.id)) {
                            return decision;
                        }

                        return {
                            ...decision,
                            severity: 'Resolved',
                            severity_tone: 'success',
                        };
                    });
                }

                payloadCopy.tabs = this.recalculateTabs(payloadCopy.tabs ?? [], payloadCopy);
                payloadCopy.summaryCards = this.recalculateSummaryCards(payloadCopy.summaryCards ?? [], payloadCopy);

                return payloadCopy;
            },

            matchesLocalPartnerSelection(partner) {
                const selectedPartner = (this.filters.partner || '').trim().toLowerCase();
                if (!selectedPartner || selectedPartner === 'all partners') {
                    return true;
                }

                return [partner.name, partner.alias, partner.code]
                    .filter(Boolean)
                    .some((value) => String(value).trim().toLowerCase() === selectedPartner);
            },

            matchesLocalModelSelection(partner) {
                const selectedModel = (this.filters.model || '').trim().toLowerCase();
                if (!selectedModel || selectedModel === 'all models') {
                    return true;
                }

                return String(partner.integration_model || partner.partner_type || '').trim().toLowerCase() === selectedModel;
            },

            matchesLocalEnvironmentSelection(status) {
                const selectedEnvironment = (this.filters.environment || '').trim().toLowerCase();
                if (!selectedEnvironment || selectedEnvironment === 'all') {
                    return true;
                }

                return String(status || '').trim().toLowerCase() === selectedEnvironment;
            },

            recalculateTabs(tabs, nextPayload) {
                return tabs.map((tab) => {
                    if (tab.id === 'partner-setup') {
                        return { ...tab, count: (nextPayload.partners ?? []).length };
                    }

                    if (tab.id === 'api-contracts') {
                        return { ...tab, count: (nextPayload.contracts ?? []).length };
                    }

                    if (tab.id === 'reconciliation') {
                        return { ...tab, count: (nextPayload.reconciliationRows ?? []).length };
                    }

                    if (tab.id === 'decisions') {
                        return {
                            ...tab,
                            count: (nextPayload.decisions ?? []).filter((decision) => decision.severity !== 'Resolved').length,
                        };
                    }

                    return tab;
                });
            },

            recalculateSummaryCards(cards, nextPayload) {
                const partnerStatuses = { Production: 0, UAT: 0, Discovery: 0 };
                (nextPayload.partners ?? []).forEach((partner) => {
                    if (partnerStatuses[partner.status] !== undefined) {
                        partnerStatuses[partner.status] += 1;
                    }
                });

                const openDecisions = (nextPayload.decisions ?? []).filter((decision) => decision.severity !== 'Resolved');
                const criticalDecisions = openDecisions.filter((decision) => decision.severity === 'Critical');

                return cards.map((card) => {
                    if (card.label === 'Configured Partners') {
                        return {
                            ...card,
                            value: String((nextPayload.partners ?? []).length),
                            subtext: `${partnerStatuses.Production} production • ${partnerStatuses.UAT} UAT • ${partnerStatuses.Discovery} discovery`,
                        };
                    }

                    if (card.label === 'Reconciliation Gaps') {
                        return {
                            ...card,
                            value: String((nextPayload.reconciliationRows ?? []).length),
                        };
                    }

                    if (card.label === 'Open Decisions') {
                        return {
                            ...card,
                            value: String(openDecisions.length),
                            subtext: `${criticalDecisions.length} critical before production`,
                        };
                    }

                    return card;
                });
            },

            buildQuery(tabId = this.currentTab) {
                const query = new URLSearchParams();
                query.set('tab', tabId);
                query.set('date_range', this.filters.dateRange);
                query.set('partner', this.filters.partner);
                query.set('model', this.filters.model);
                query.set('environment', this.filters.environment);

                return query.toString();
            },

            async fetchJson(url, options = {}) {
                const response = await fetch(url, {
                    credentials: 'same-origin',
                    headers: this.requestHeaders(),
                    ...options,
                });

                const data = await response.json().catch(() => ({}));

                if (!response.ok) {
                    throw new Error(data.message || 'Unable to refresh B2B Partner data right now.');
                }

                return data;
            },

            async refreshData({ silent = false, reason = 'search', tab = null } = {}) {
                const targetTab = tab ?? this.currentTab;

                this.loading.tab = targetTab;
                this.loading.search = reason === 'search';
                this.loading.reset = reason === 'reset';

                try {
                    const data = await this.fetchJson(`${this.endpoints.data}?${this.buildQuery(targetTab)}`, {
                        method: 'GET',
                    });
                    this.applyPayload(data.payload ?? {});

                    if (!silent && data.message) {
                        this.flash(data.message, 'info');
                    }
                } catch (error) {
                    this.flash(error.message || 'Unable to refresh this section right now.', 'error');
                } finally {
                    this.loading.tab = '';
                    this.loading.search = false;
                    this.loading.reset = false;
                }
            },

            async handleSearch() {
                await this.refreshData({ reason: 'search' });
            },

            async handleReset() {
                this.filters = clone(this.defaultFilters);
                this.transactionOutcome = 'All outcomes';
                await this.refreshData({ reason: 'reset' });
            },

            async activateTab(tabId) {
                this.currentTab = tabId;
                await this.refreshData({ silent: true, reason: 'tab', tab: tabId });
            },

            filteredPartners() {
                const needle = this.partnerSearch.trim().toLowerCase();

                if (!needle) {
                    return this.partners;
                }

                return this.partners.filter((partner) => {
                    return [
                        partner.name,
                        partner.alias,
                        partner.code,
                        partner.market,
                        partner.integration_model,
                    ]
                        .filter(Boolean)
                        .join(' ')
                        .toLowerCase()
                        .includes(needle);
                });
            },

            selectedPartner() {
                return this.partners.find((partner) => partner.code === this.selectedPartnerCode) ?? null;
            },

            selectedPartnerFields() {
                const partner = this.selectedPartner();
                if (!partner) {
                    return [];
                }

                return partner.details?.[this.selectedPartnerDetailTab] ?? [];
            },

            selectPartner(code) {
                this.selectedPartnerCode = code;
            },

            filteredTransactions() {
                return this.transactions.filter((row) => {
                    const streamMatches = row.stream === this.currentTransactionView;
                    const outcomeMatches = this.transactionOutcome === 'All outcomes' || row.outcome === this.transactionOutcome;

                    return streamMatches && outcomeMatches;
                });
            },

            filteredDecisions() {
                if (this.currentDecisionCategory === 'All') {
                    return this.decisions;
                }

                return this.decisions.filter((decision) => decision.category === this.currentDecisionCategory);
            },

            async markDecisionResolved(id) {
                if (this.loading.decisionId === id) {
                    return;
                }

                this.loading.decisionId = id;

                try {
                    const data = await this.fetchJson(this.endpoints.resolveDecision.replace('__DECISION_ID__', encodeURIComponent(id)), {
                        method: 'POST',
                        body: JSON.stringify({}),
                    });

                    if (!this.resolvedDecisionIds.includes(id)) {
                        this.resolvedDecisionIds.push(id);
                    }

                    this.applyPayload(this.currentPayloadSnapshot());
                    this.flash(data.message || 'Decision marked as resolved.', 'success');
                } catch (error) {
                    this.flash(error.message || 'Unable to resolve this decision right now.', 'error');
                } finally {
                    this.loading.decisionId = null;
                }
            },

            openWizard() {
                this.showWizard = true;
                this.wizardStep = 1;
                this.wizard = clone(this.wizardDefaults);
            },

            closeWizard() {
                if (this.loading.wizardSubmit) {
                    return;
                }

                this.showWizard = false;
            },

            nextWizard() {
                if (this.wizardStep < this.wizardSteps.length) {
                    this.wizardStep += 1;
                }
            },

            previousWizard() {
                if (this.wizardStep > 1) {
                    this.wizardStep -= 1;
                }
            },

            registerDraftPartner(partner, launchReadiness) {
                this.draftPartners = [
                    clone(partner),
                    ...this.draftPartners.filter((item) => item.code !== partner.code),
                ];
                this.draftLaunchReadiness = [
                    clone(launchReadiness),
                    ...this.draftLaunchReadiness.filter((item) => item.code !== launchReadiness.code),
                ];
            },

            async createDraftPartner() {
                this.loading.wizardSubmit = true;

                try {
                    const data = await this.fetchJson(this.endpoints.draft, {
                        method: 'POST',
                        body: JSON.stringify({ wizard: this.wizard }),
                    });

                    this.registerDraftPartner(data.partner, data.launch_readiness);
                    this.applyPayload(this.currentPayloadSnapshot());
                    this.selectedPartnerCode = data.partner.code;
                    this.selectedPartnerDetailTab = 'business';
                    this.showWizard = false;
                    await this.activateTab('partner-setup');
                    this.flash(data.message || 'Draft partner created.', 'success');
                } catch (error) {
                    this.flash(error.message || 'Unable to create the draft partner right now.', 'error');
                } finally {
                    this.loading.wizardSubmit = false;
                }
            },
        };
    };
</script>
@endpush