/**
 * Entity Panel - Universal slide-out detail panel
 * View IS Edit: fields always editable, change detection, save bar
 */

/* ── Prevent body scroll ── */
body.hex-ep-open {
    overflow: hidden;
}

/* ── Overlay ── */
.hex-ep-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.hex-ep-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ── Panel ── */
.hex-ep-panel {
    position: fixed;
    top: 0;
    right: -520px;
    width: 100%;
    max-width: 520px;
    height: 100%;
    background: #fff;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transition: right 0.3s ease;
}

.hex-ep-panel.is-open {
    right: 0;
}

/* WP admin bar offset */
.admin-bar .hex-ep-panel,
.admin-bar .hex-ep-overlay {
    top: 32px;
}

.admin-bar .hex-ep-panel {
    height: calc(100% - 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar .hex-ep-panel,
    .admin-bar .hex-ep-overlay {
        top: 46px;
    }
    .admin-bar .hex-ep-panel {
        height: calc(100% - 46px);
    }
}

/* ── Header ── */
.hex-ep-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
    background: #f8f9fa;
    flex-shrink: 0;
}

.hex-ep-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 14px;
    color: #fff;
}

.hex-ep-type-badge--ticket { background: #059669; }
.hex-ep-type-badge--customer { background: #2271b1; }
.hex-ep-type-badge--registration { background: #d97706; }
.hex-ep-type-badge--order { background: #7c3aed; }
.hex-ep-type-badge--product { background: #059669; }

.hex-ep-entity-id {
    font-weight: 600;
    font-size: 15px;
    color: #1d2327;
    flex: 1;
}

.hex-ep-close {
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: #666;
    padding: 0;
    line-height: 1;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.hex-ep-close:hover {
    background: #e5e5e5;
    color: #1d2327;
}

/* ── Body ── */
.hex-ep-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* ── Loading ── */
.hex-ep-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #666;
}

.hex-ep-loading .hex-ep-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e5e5;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: hex-ep-spin 0.8s linear infinite;
    margin-bottom: 12px;
}

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

.hex-ep-loading .hex-ep-error {
    color: #d63638;
    text-align: center;
}

/* ── Content (hidden until loaded) ── */
.hex-ep-content {
    display: none;
}

.hex-ep-content.is-loaded {
    display: block;
}

/* ── Fields ── */
.hex-ep-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hex-ep-field {
    position: relative;
    border-left: 3px solid transparent;
    padding-left: 12px;
    transition: border-color 0.2s, background-color 0.2s;
}

.hex-ep-field--changed {
    border-left-color: #2271b1;
    background-color: #f0f6fc;
    border-radius: 0 4px 4px 0;
    padding: 8px 12px 8px 12px;
    margin-left: -12px;
    padding-left: 24px;
}

.hex-ep-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.hex-ep-field-input,
.hex-ep-field-select,
.hex-ep-field-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    font-size: 14px;
    color: #1d2327;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.hex-ep-field-input:focus,
.hex-ep-field-select:focus,
.hex-ep-field-textarea:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.15);
}

.hex-ep-field-input[readonly],
.hex-ep-field-textarea[readonly] {
    background: #f6f7f7;
    color: #666;
    cursor: default;
}

.hex-ep-field-textarea {
    resize: vertical;
    min-height: 60px;
}

/* Field row (inline pair) */
.hex-ep-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hex-ep-field-row .hex-ep-field {
    margin-left: 0;
    padding-left: 12px;
}

/* ── Section divider ── */
.hex-ep-section {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
}

.hex-ep-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    margin-bottom: 12px;
}

/* ── Linked entity cards ── */
.hex-ep-linked {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hex-ep-linked-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f6f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-size: 13px;
}

.hex-ep-linked-type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    color: #fff;
}

.hex-ep-linked-type--customer { background: #2271b1; }
.hex-ep-linked-type--order { background: #7c3aed; }
.hex-ep-linked-type--registration { background: #d97706; }
.hex-ep-linked-type--ticket { background: #059669; }

.hex-ep-linked-info {
    color: #1d2327;
}

.hex-ep-linked-unlink {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    transition: color 0.2s;
}

.hex-ep-linked-unlink:hover {
    color: #d63638;
}

.hex-ep-linked-counts {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hex-ep-linked-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: #555;
    background: #f3f4f6;
}

.hex-ep-linked-count .fa {
    font-size: 11px;
}

.hex-ep-linked-count--ticket .fa { color: #059669; }
.hex-ep-linked-count--order .fa { color: #7c3aed; }
.hex-ep-linked-count--registration .fa { color: #d97706; }

.hex-ep-linked-count strong {
    color: #1d2327;
}

/* ── Status badge (reused patterns) ── */
.hex-ep-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.hex-ep-status-badge--new,
.hex-ep-status-badge--open {
    background: #e0f2fe;
    color: #0369a1;
}

.hex-ep-status-badge--in-progress {
    background: #fef3c7;
    color: #b45309;
}

.hex-ep-status-badge--waiting-on-customer {
    background: #fce7f3;
    color: #be185d;
}

.hex-ep-status-badge--resolved,
.hex-ep-status-badge--closed {
    background: #d1fae5;
    color: #065f46;
}

/* Registration statuses */
.hex-ep-status-badge--verified { background: #d1fae5; color: #065f46; }
.hex-ep-status-badge--active { background: #e0f2fe; color: #0369a1; }
.hex-ep-status-badge--expired { background: #fee2e2; color: #991b1b; }
.hex-ep-status-badge--dealer { background: #fef3c7; color: #b45309; }
.hex-ep-status-badge--invalid { background: #fee2e2; color: #991b1b; }
.hex-ep-status-badge--incomplete { background: #f3f4f6; color: #6b7280; }
.hex-ep-status-badge--pending { background: #f3f4f6; color: #6b7280; }

/* ── Status badge (chip style, matches Lists/Create Center) ── */
.hex-ep-field .hex-status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.hex-ep-field .hex-status-badge.status-new,
.hex-ep-field .hex-status-badge.status-open { background: #e3f2fd; color: #1565c0; }
.hex-ep-field .hex-status-badge.status-inquiry { background: #ede7f6; color: #5e35b1; }
.hex-ep-field .hex-status-badge.status-in-progress { background: #fff8e1; color: #f57c00; }
.hex-ep-field .hex-status-badge.status-wooc,
.hex-ep-field .hex-status-badge.status-waiting-on-customer { background: #fce4ec; color: #c2185b; }
.hex-ep-field .hex-status-badge.status-woot,
.hex-ep-field .hex-status-badge.status-waiting-on-team { background: #f3e5f5; color: #7b1fa2; }
.hex-ep-field .hex-status-badge.status-awaiting-parts { background: #fff3e0; color: #e65100; }
.hex-ep-field .hex-status-badge.status-action-needed { background: #fbe9e7; color: #bf360c; }
.hex-ep-field .hex-status-badge.status-orange { background: #fff3e0; color: #e65100; }
.hex-ep-field .hex-status-badge.status-on-hold { background: #fff3e0; color: #e65100; }
.hex-ep-field .hex-status-badge.status-swap-out { background: #e8eaf6; color: #283593; }
.hex-ep-field .hex-status-badge.status-return { background: #fce4ec; color: #c2185b; }
.hex-ep-field .hex-status-badge.status-verify-warranty { background: #f3e5f5; color: #7b1fa2; }
.hex-ep-field .hex-status-badge.status-warranty-void { background: #fee2e2; color: #991b1b; }
.hex-ep-field .hex-status-badge.status-resolved { background: #e8f5e9; color: #2e7d32; }
.hex-ep-field .hex-status-badge.status-closed { background: #eceff1; color: #546e7a; }
.hex-ep-field .hex-status-badge.status-default { background: #f3f4f6; color: #6b7280; }

/* ── Status chip dropdown (shared with ticket-admin, create-center) ── */
.hex-ep-field .hex-status-dropdown {
    position: relative;
    display: inline-block;
}

.hex-ep-field .hex-status-dropdown > .hex-status-badge {
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.hex-ep-field .hex-status-dropdown > .hex-status-badge:hover {
    opacity: 0.85;
}

.hex-ep-field .hex-status-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    margin-top: 4px;
    min-width: 160px;
    padding: 4px 0;
}

.hex-ep-field .hex-status-dropdown.open .hex-status-options {
    display: block;
}

.hex-ep-field .hex-status-option {
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.hex-ep-field .hex-status-option:hover {
    background: #f0f0f1;
}

.hex-ep-field .hex-status-option.current {
    background: #f6f7f7;
}

.hex-ep-field .hex-status-option.current::after {
    content: ' \2713';
    font-size: 11px;
    margin-left: 4px;
}

.hex-ep-field .hex-status-option .hex-status-badge {
    cursor: pointer;
}

/* ── Replies ── */
.hex-ep-replies {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
}

.hex-ep-replies-title {
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    margin-bottom: 12px;
}

.hex-ep-replies-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.hex-ep-reply {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
}

.hex-ep-reply--agent {
    background: #e7f3ff;
    margin-right: 24px;
}

.hex-ep-reply--customer {
    background: #f0f0f0;
    margin-left: 24px;
}

.hex-ep-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.hex-ep-reply-author {
    font-weight: 600;
    font-size: 12px;
    color: #1d2327;
}

.hex-ep-reply-date {
    font-size: 11px;
    color: #666;
}

.hex-ep-reply-content p:last-child {
    margin-bottom: 0;
}

.hex-ep-no-replies {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 16px;
    font-size: 13px;
}

/* Reply composer */
.hex-ep-reply-composer {
    margin-top: 12px;
}

.hex-ep-reply-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccd0d4;
    border-radius: 6px;
    font-size: 13px;
    min-height: 80px;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.hex-ep-reply-textarea:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.15);
}

.hex-ep-reply-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.hex-ep-reply-send {
    padding: 7px 16px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.hex-ep-reply-send:hover {
    background: #135e96;
}

.hex-ep-reply-send--external {
    background: #d97706;
}

.hex-ep-reply-send--external:hover {
    background: #b45309;
}

.hex-ep-reply-send:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Message type toggle (internal/external) ── */
.hex-ep-message-type-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hex-ep-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.hex-ep-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.hex-ep-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2271b1;
    border-radius: 24px;
    transition: background 0.3s;
}

.hex-ep-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.hex-ep-toggle-input:checked + .hex-ep-toggle-slider {
    background: #d97706;
}

.hex-ep-toggle-input:checked + .hex-ep-toggle-slider::before {
    transform: translateX(20px);
}

.hex-ep-toggle-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #2271b1;
    white-space: nowrap;
}

.hex-ep-toggle-label--external {
    color: #d97706;
}

/* Message hint */
.hex-ep-message-hint {
    margin-top: 6px;
    font-size: 11px;
    color: #999;
}

.hex-ep-message-hint .hex-ep-hint-external {
    display: none;
}

.hex-ep-message-hint--external .hex-ep-hint-internal {
    display: none;
}

.hex-ep-message-hint--external .hex-ep-hint-external {
    display: inline;
}

/* ── Reply type badges ── */
.hex-ep-reply-type {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hex-ep-reply-type--internal {
    background: #e0f2fe;
    color: #2271b1;
}

.hex-ep-reply-type--external {
    background: #fef3c7;
    color: #d97706;
}

/* Reply border accents for message type */
.hex-ep-reply--internal {
    border-left: 3px solid #2271b1;
}

.hex-ep-reply--external {
    border-left: 3px solid #d97706;
}

.hex-ep-reply-type--system {
    background: #f1f1f1;
    color: #787c82;
}

.hex-ep-reply--system {
    border-left: 3px solid #a7aaad;
    opacity: 0.75;
}

/* System messages collapsible section */
.hex-ep-system-section {
    margin-top: 12px;
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
}

.hex-ep-system-toggle {
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #787c82;
    padding: 6px 0;
    user-select: none;
}

.hex-ep-system-toggle:hover {
    color: #50575e;
}

.hex-ep-system-caret {
    width: 12px;
    display: inline-block;
    text-align: center;
}

.hex-ep-system-list .hex-ep-reply {
    font-size: 12px;
}

.hex-ep-system-list .hex-ep-reply-content {
    font-size: 12px;
    color: #787c82;
}

/* Truncated URL links */
.hex-ep-reply-content a {
    word-break: break-all;
}

.hex-ep-url-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

a.hex-ep-url-truncated {
    border-bottom: 1px dashed #a7aaad;
    text-decoration: none;
    cursor: pointer;
}

a.hex-ep-url-truncated:hover {
    border-bottom-style: solid;
    color: #2271b1;
}

.hex-ep-url-actions {
    display: none;
    align-items: center;
    gap: 3px;
    margin-left: 2px;
}

.hex-ep-url-wrap:hover .hex-ep-url-actions {
    display: inline-flex;
}

.hex-ep-url-actions i {
    font-size: 11px;
    color: #a7aaad;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.hex-ep-url-actions i:hover {
    color: #2271b1;
    background: #f0f0f1;
}

.hex-ep-url-actions .fa-check {
    color: #059669;
}

/* ── Order items table ── */
.hex-ep-order-items {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 4px;
}

.hex-ep-order-items th {
    text-align: left;
    padding: 6px 8px;
    font-weight: 600;
    color: #666;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e5e5e5;
}

.hex-ep-order-items td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
}

.hex-ep-order-total {
    font-size: 15px;
    font-weight: 600;
    color: #1d2327;
    margin-top: 8px;
}

/* ── Address display ── */
.hex-ep-address {
    background: #f6f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #1d2327;
}

.hex-ep-address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.hex-ep-address-type {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
}

.hex-ep-address-edit {
    font-size: 12px;
    color: #2271b1;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.hex-ep-address-edit:hover {
    color: #135e96;
}

/* Address form (inline edit) */
.hex-ep-address-form {
    display: none;
}

.hex-ep-address-form.is-editing {
    display: block;
}

.hex-ep-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hex-ep-address-grid .hex-ep-address-full {
    grid-column: 1 / -1;
}

/* ── Save bar ── */
.hex-ep-save-bar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    animation: hex-ep-slide-up 0.2s ease;
}

.hex-ep-save-bar.is-visible {
    display: flex;
}

@keyframes hex-ep-slide-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hex-ep-save-status {
    flex: 1;
    font-size: 13px;
    color: #666;
}

.hex-ep-save-status--saving {
    color: #2271b1;
}

.hex-ep-save-status--saved {
    color: #059669;
}

.hex-ep-save-status--error {
    color: #d63638;
}

.hex-ep-discard {
    padding: 7px 14px;
    background: #fff;
    color: #666;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.hex-ep-discard:hover {
    border-color: #999;
    color: #1d2327;
}

.hex-ep-save {
    padding: 7px 16px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.hex-ep-save:hover {
    background: #135e96;
}

.hex-ep-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Unsaved changes dialog ── */
.hex-ep-confirm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    z-index: 10;
    max-width: 320px;
    text-align: center;
}

.hex-ep-confirm-text {
    font-size: 14px;
    color: #1d2327;
    margin-bottom: 16px;
}

.hex-ep-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.hex-ep-confirm-actions button {
    padding: 7px 14px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #ccd0d4;
    background: #fff;
    color: #1d2327;
}

.hex-ep-confirm-actions .hex-ep-confirm-save {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}

.hex-ep-confirm-actions .hex-ep-confirm-discard {
    color: #d63638;
    border-color: #d63638;
}

/* ── Read-only mode (orders, frontend) ── */
.hex-ep-panel--readonly .hex-ep-field-input,
.hex-ep-panel--readonly .hex-ep-field-select,
.hex-ep-panel--readonly .hex-ep-field-textarea {
    background: #f6f7f7;
    color: #1d2327;
    cursor: default;
    pointer-events: none;
}

/* ── Legacy indicator ── */
.hex-ep-legacy {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d97706;
    margin-left: 8px;
    vertical-align: middle;
}

/* ── Active row in Create Center ── */
.hex-cc-result-row.hex-cc-row-active {
    background: #f0f6fc;
    outline: 2px solid #2271b1;
    outline-offset: -2px;
}

/* ── Editable order items ── */
.hex-ep-order-items-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hex-ep-order-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f6f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-size: 13px;
}

.hex-ep-order-item-name {
    flex: 1;
    color: #1d2327;
    font-weight: 500;
}

.hex-ep-order-item-qty-input {
    width: 56px;
    padding: 4px 8px;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
}

.hex-ep-order-item-qty-input:focus {
    outline: none;
    border-color: #2271b1;
}

.hex-ep-order-item-price {
    color: #666;
    font-size: 13px;
    min-width: 80px;
    text-align: right;
}

.hex-ep-order-item-remove {
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
}

.hex-ep-order-item-remove:hover {
    color: #d63638;
}

/* Product search */
.hex-ep-order-add-product {
    position: relative;
    margin-top: 4px;
}

.hex-ep-product-search {
    width: 100%;
    padding: 8px 10px;
    border: 1px dashed #ccd0d4;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
}

.hex-ep-product-search:focus {
    outline: none;
    border-color: #2271b1;
    border-style: solid;
}

.hex-ep-product-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccd0d4;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hex-ep-product-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 13px;
}

.hex-ep-product-result:hover {
    background: #f0f6fc;
}

.hex-ep-product-result-name {
    flex: 1;
    color: #1d2327;
}

.hex-ep-product-result-price {
    color: #666;
    font-size: 12px;
}

.hex-ep-product-result-sku {
    color: #999;
    font-size: 11px;
}

.hex-ep-product-no-results {
    padding: 10px 12px;
    color: #999;
    font-size: 13px;
    font-style: italic;
}

/* Order totals */
.hex-ep-order-totals {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e5e5;
}

.hex-ep-order-totals-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    color: #666;
}

.hex-ep-order-totals-total {
    font-weight: 600;
    font-size: 15px;
    color: #1d2327;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid #e5e5e5;
}

/* Order no items */
.hex-ep-order-no-items {
    padding: 16px;
    text-align: center;
    color: #999;
    font-size: 13px;
    font-style: italic;
}

/* Additional order status badges */
.hex-ep-status-badge--processing { background: #e0f2fe; color: #0369a1; }
.hex-ep-status-badge--on-hold { background: #fef3c7; color: #b45309; }
.hex-ep-status-badge--completed { background: #d1fae5; color: #065f46; }
.hex-ep-status-badge--cancelled { background: #f3f4f6; color: #6b7280; }
.hex-ep-status-badge--refunded { background: #f3f4f6; color: #6b7280; }
.hex-ep-status-badge--failed { background: #fee2e2; color: #991b1b; }
.hex-ep-status-badge--draft { background: #f3f4f6; color: #6b7280; }

/* ── Link context banner (shown when creating entity to link) ── */
.hex-ep-link-context {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: #f0f6fc;
    border: 1px solid #c3d9ed;
    border-radius: 4px;
    font-size: 13px;
}

.hex-ep-link-context-label {
    color: #666;
    font-style: italic;
    white-space: nowrap;
}

/* ── Mobile ── */
@media (max-width: 540px) {
    .hex-ep-panel {
        max-width: 100%;
        right: -100%;
    }

    .hex-ep-field-row {
        grid-template-columns: 1fr;
    }

    .hex-ep-address-grid {
        grid-template-columns: 1fr;
    }
}