/* Opportunity Conversion wizard */

/*
 * Opportunity detail view "Convert" button — moved out of the
 * .actions-btn-group (Edit + "...") by views/opportunity/record/detail.js so
 * it renders as a genuinely separate button rather than a joined segment of
 * that group; this just adds the visual gap between them.
 */
[data-action="convertOpportunity"] {
    margin-left: 8px;
}

.opportunity-conversion-wizard {
    display: flex;
    flex-direction: column;
    min-height: 500px;
    overflow: hidden;;
}

.opportunity-conversion-wizard .oc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #e0e0e0;
}

.opportunity-conversion-wizard .oc-topbar-titles {
}

.opportunity-conversion-wizard .oc-topbar-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.opportunity-conversion-wizard .oc-progress-ring-container {
    flex-shrink: 0;
    line-height: 0;
}

.opportunity-conversion-wizard .oc-progress-ring {
    display: block;
}

.opportunity-conversion-wizard .oc-topbar-title {
    font-size: 22px;
    font-weight: 600;
}

.opportunity-conversion-wizard .oc-topbar-meta {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.opportunity-conversion-wizard .oc-topbar-user-divider {
    width: 1px;
    height: 12px;
    background: #ccc;
    margin: 0 10px;
}

/* Separates the informational actions (History / Reassign Conversion) from
 * the primary/destructive ones (Save / Cancel Conversion) with a wider gap
 * than the default button spacing, so the two groups read as distinct. */
.opportunity-conversion-wizard .oc-topbar-actions [data-action="save"] {
    margin-left: 25px;
}

.opportunity-conversion-wizard .oc-nav-item-locked {
    pointer-events: none;
    opacity: 0.6;
}

.opportunity-conversion-wizard .oc-body {
    display: flex;
    flex: 1;
    min-height: 400px;
}

.opportunity-conversion-wizard .oc-nav {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid #e0e0e0;
    padding: 10px 0;
}

.opportunity-conversion-wizard .oc-nav-stage {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #888;
    padding: 10px 15px 4px;
}

.opportunity-conversion-wizard .oc-nav-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

.opportunity-conversion-wizard .oc-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 25px;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.opportunity-conversion-wizard .oc-nav-item-active {
    font-weight: 600;
    background: #d3e6fc;
    border-left-color: #2b7de9;
}

.opportunity-conversion-wizard .oc-nav-item-complete {
    color: #2e7d32;
}

.opportunity-conversion-wizard .oc-nav-item-dim {
    color: #aaa;
}

.opportunity-conversion-wizard .oc-status-icon {
    flex-shrink: 0;
    font-size: 13px;
    width: 14px;
    text-align: center;
}

.opportunity-conversion-wizard .oc-status-icon-complete {
    color: #2e7d32;
}

.opportunity-conversion-wizard .oc-status-icon-active {
    color: #2b7de9;
    font-size: 9px;
}

.opportunity-conversion-wizard .oc-status-icon-pending {
    color: #ccc;
}

.opportunity-conversion-wizard .oc-status-icon-neutral {
    color: #ccc;
    font-size: 9px;
}

.opportunity-conversion-wizard .oc-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #f6f6f6;
}

.opportunity-conversion-wizard .oc-bottombar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 15px;
    border-top: 1px solid #e0e0e0;
}

.opportunity-conversion-wizard .oc-section h4 {
    margin-top: 0;
}

.opportunity-conversion-wizard .oc-section-description {
    color: #777;
    font-size: 13px;
    margin-top: -6px;
    margin-bottom: 16px;
    max-width: 640px;
}

.opportunity-conversion-wizard .oc-account-suggestions,
.opportunity-conversion-wizard .oc-tasks-list {
    list-style: none;
    padding: 0;
}

.opportunity-conversion-wizard .oc-account-suggestions li {
    margin-bottom: 6px;
}

.opportunity-conversion-wizard .oc-confirm-summary dt {
    margin-top: 10px;
}

.opportunity-conversion-wizard .oc-tasks-list li {
    padding: 4px 0;
}

.opportunity-conversion-wizard .oc-tasks-list li label {
    cursor: pointer;
    margin-bottom: 0;
}

.opportunity-conversion-wizard .oc-tasks-button {
    margin-top: 15px;
}

.opportunity-conversion-wizard .oc-tasks-records {
    margin-top: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    background: #fff;
}

.opportunity-conversion-wizard .oc-tasks-records-heading {
    padding: 14px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 13px;
    color: #555;
}

.opportunity-conversion-wizard .oc-tasks-records-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px 28px;
    padding: 20px;
}

.opportunity-conversion-wizard .oc-tasks-records-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 3px;
}

.opportunity-conversion-wizard .oc-tasks-records-value {
    font-size: 13px;
    color: #333;
}

.opportunity-conversion-wizard .oc-table-card {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.opportunity-conversion-wizard .oc-table-card table {
    margin-bottom: 0;
}

.opportunity-conversion-wizard .oc-table-card th {
    color: #888;
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid #e5e5e5 !important;
}

.opportunity-conversion-wizard .oc-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: #eef1f5;
    color: #667;
}

.opportunity-conversion-wizard .oc-badge-success {
    background: #e3f5e6;
    color: #2e7d32;
}

.opportunity-conversion-wizard .oc-badge-warning {
    background: #fdeee0;
    color: #a15c00;
}

.opportunity-conversion-wizard .oc-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin: 12px 0;
}

.opportunity-conversion-wizard .oc-notice .oc-notice-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.opportunity-conversion-wizard .oc-notice-info {
    background: #eaf3fd;
    color: #2565ae;
    border: 1px solid #b7d7f6;
}

.opportunity-conversion-wizard .oc-notice-warning {
    background: #fdeaea;
    color: #ac3232;
    border: 1px solid #f2b8b8;
}

.opportunity-conversion-wizard .oc-contacts-key-invoicing {
    margin-top: 20px;
}

/* Rendered standalone (not inside a normal Record view's panel chrome), so
 * this field doesn't inherit an outer border from anywhere. Add just the
 * outer frame + clipping here — nothing about the list items, "Select"
 * input, or buttons themselves is touched, so they stay fully native. */
.opportunity-conversion-wizard .oc-account-field,
.opportunity-conversion-wizard .oc-contacts-field {
    max-width: 480px;
    overflow: hidden;
}

/* Bootstrap's default `.list-group { margin-bottom: 20px }` leaves a large
 * gap before the "Select" row that follows it in the same field. Closing
 * it doesn't touch how the list or its items actually look (no borders,
 * radius, or backgrounds touched) — just removes that trailing spacing. */
.opportunity-conversion-wizard .oc-account-field .list-group,
.opportunity-conversion-wizard .oc-contacts-field .list-group {
    margin-bottom: 0;
    background-color: #ffffff;
}

.opportunity-conversion-wizard .oc-contacts-field .list-group-item:last-child {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: 0;
}

/* "Create New Account"/"Create New Contact" triggers, shown below the
 * existing-record picker field — deferred quick-create, see
 * account.js/contacts.js. */
.opportunity-conversion-wizard .oc-account-create-trigger,
.opportunity-conversion-wizard .oc-contacts-create-trigger {
    margin-top: 10px;
}

.opportunity-conversion-wizard .oc-contacts-pending-list:not(:empty) {
    margin-top: 14px;
}

/* Account section's pending-account summary panel, shown in place of the
 * picker once a brand-new Account has been captured (validated, but not
 * yet persisted) via the deferred quick-create modal. Uses the standard
 * Bootstrap `.panel.panel-default` wrapper for a native look, so only
 * inner spacing needs adding here. */
.opportunity-conversion-wizard .oc-pending-record-panel {
    max-width: 480px;
}

.opportunity-conversion-wizard .oc-pending-record-name {
    font-weight: 600;
    margin-bottom: 10px;
}

.opportunity-conversion-wizard .oc-pending-record-actions .btn {
    margin-right: 6px;
}

/* Contacts section's list of pending (not-yet-persisted) Contacts,
 * deliberately kept separate from the standard linkMultiple field's own
 * chips — see contacts.js's renderPendingContactsList(). */
.opportunity-conversion-wizard .oc-pending-record-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.opportunity-conversion-wizard .oc-pending-record-list .oc-pending-record-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    margin-bottom: 6px;
    max-width: 480px;
}

.opportunity-conversion-wizard .oc-pending-record-list .oc-pending-record-name {
    flex: 1;
    margin-bottom: 0;
    font-weight: normal;
}