.modal-content:has(.lead-modal-sectioned) {
    width: min(800px, 92vw);
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* #modal-body is a generic wrapper shared by every modal type (modal.js) —
   it normally has no sizing of its own, so it has to be pulled into the
   flex chain here, scoped to only this modal, or the max-height/overflow
   above has nothing to constrain and just clips content instead of
   scrolling it. */
.modal-content:has(.lead-modal-sectioned) > #modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.lead-modal-sectioned {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.lead-modal-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.lead-modal-sectioned .modal-footer {
    flex-shrink: 0;
    padding-top: 16px;
}

.stage-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.stage-stepper-btn {
    background: #f5f7fb;
    color: #374151;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.stage-stepper-btn:hover:not(:disabled) {
    background: #eef1f8;
    filter: none;
}

.stage-stepper-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.stage-stepper-label {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    padding: 8px 12px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
}

.stage-move-panel {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: #fbfbfd;
}

.stage-move-panel .modal-footer {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 0;
}

.lead-modal-sectioned input,
.lead-modal-sectioned select,
.lead-modal-sectioned textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 10px;
    font-family: inherit;
}

.lead-section {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.lead-section-title {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.lead-essentials {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* A read-only mirror of the 照片 gallery's own first photo (see
   components/lead/leadModal.js's bindLeadGallery, which keeps this in sync
   every time that gallery re-renders) — actually adding/reordering/deleting
   photos only ever happens down in that section now, not here; this is
   purely so the name still has a face next to it at a glance, without
   scrolling, the way the old single-avatar upload widget used to. Clicking
   it jumps down to the real gallery instead of opening a file picker. */
.avatar-preview {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    font-size: 28px;
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lead-essentials-fields {
    flex: 1;
}

.vip-stars {
    display: flex;
    gap: 4px;
    font-size: 22px;
    color: #f59e0b;
    cursor: pointer;
    margin-bottom: 10px;
    user-select: none;
}

.custom-field-row {
    display: block;
    margin-bottom: 10px;
}

.custom-field-row span {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}

.lead-field-label {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}

.custom-field-image {
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-field-image-preview {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: #f3f4f6;
}

.custom-field-image-preview.hidden {
    display: none;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    background: rgba(0, 0, 0, .55);
}

.gallery-item {
    cursor: grab;
}

/* The first photo is always the profile photo (leads.avatar_url /
   products.image_url) — a blue ring plus a small badge marks it, so
   dragging a different photo into first place visibly makes it "the" one
   the moment it lands there. */
.gallery-item-profile {
    outline: 3px solid var(--primary-color, #2563eb);
    outline-offset: -3px;
}

.gallery-profile-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--primary-color, #2563eb);
    color: white;
    font-size: 11px;
    line-height: 1.4;
}

.gallery-item-dragging {
    opacity: .4;
}

.gallery-item-drop-target {
    outline: 3px dashed var(--primary-color, #2563eb);
    outline-offset: -3px;
}

/* Scales with the window instead of a flat pixel cap — still reads
   comfortably as a form/list on a normal desktop window (900px lands close
   to the old 600px cap's proportions but noticeably roomier), and narrows
   gracefully on a smaller one instead of ever forcing horizontal scroll on
   the page itself. 角色與權限 overrides this entirely (see
   .role-permissions-config in users.css) since it holds an actual wide data
   table, not a form. */
.lead-fields-config {
    max-width: min(900px, 90vw);
}

.webhook-config-page {
    max-width: 900px;
}

.theme-color-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.theme-color-picker-row input[type="color"] {
    width: 60px;
    height: 40px;
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
}

.theme-color-picker-row span {
    font-size: 14px;
    color: #6b7280;
    font-family: monospace;
    width: 70px;
}

.theme-color-picker-row label {
    font-size: 14px;
    color: #374151;
}

.lead-field-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.lead-field-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.webhook-account-block {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-top: 16px;
    background: #fafafa;
    overflow: hidden;
}

.webhook-account-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
}

.webhook-account-collapse-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.webhook-account-collapse-chevron {
    display: inline-block;
    font-size: 11px;
    color: #9ca3af;
    transition: transform .15s;
}

.webhook-account-block:not(.collapsed) .webhook-account-collapse-chevron {
    transform: rotate(90deg);
}

.webhook-account-block-body {
    padding: 0 16px 16px;
}

.webhook-account-block.collapsed .webhook-account-block-body {
    display: none;
}

.webhook-account-block-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.webhook-account-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.webhook-account-row label {
    font-size: 14px;
    color: #374151;
}

.webhook-account-row input {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.webhook-account-row .webhook-account-secret-label {
    margin-top: 10px;
    font-size: 12px;
    color: #6b7280;
}

.webhook-platform-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    margin-bottom: 10px;
    cursor: pointer;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s;
}

.switch-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s;
}

.switch input:checked + .switch-slider {
    background: var(--primary-color, #2563eb);
}

.switch input:checked + .switch-slider::before {
    transform: translateX(18px);
}

.switch input:focus-visible + .switch-slider {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
}

.webhook-stage-mapping-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.webhook-stage-mapping-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.webhook-stage-mapping-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.webhook-stage-mapping-name {
    flex: 1;
    min-width: 140px;
    font-size: 13px;
    color: #4b5563;
}

.webhook-stage-mapping-row select,
.webhook-stage-mapping-row input {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
}

.webhook-mapping-save-btn {
    align-self: flex-start;
    margin-top: 4px;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
}

.webhook-mapping-save-btn:hover {
    background: #f5f7fb;
    filter: none;
}

.webhook-mapping-notice {
    font-size: 12px;
    color: #16a34a;
}

.webhook-domain-status {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
}

.webhook-domain-status-verified {
    background: #dcfce7;
    color: #16a34a;
}

.webhook-domain-status-pending,
.webhook-domain-status-not_started {
    background: #fef3c7;
    color: #b45309;
}

.webhook-domain-status-failed,
.webhook-domain-status-temporary_failure {
    background: #fee2e2;
    color: #dc2626;
}

.webhook-dns-records {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.webhook-dns-record {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
}

.webhook-dns-record-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.webhook-dns-record-label {
    font-size: 11px;
    color: #9ca3af;
}

.webhook-dns-record-value {
    flex: 1;
    min-width: 200px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.webhook-dns-record-value-text {
    font-family: monospace;
    word-break: break-all;
}

.lead-field-form input,
.lead-field-form select {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.contact-method-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}

.lead-field-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 8px;
}

.lead-field-item.dragging {
    opacity: 0.5;
}

/* Keeps essential rows' labels aligned with custom rows even though
   essentials have no drag handle — .drag-handle itself is already styled
   globally in css/automation.css (same 6-dot handle used there). */
.drag-handle-spacer {
    width: 36px;
    min-width: 36px;
}

.lead-field-item span:first-child {
    flex: 1;
    font-weight: 600;
}

.field-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.field-row-main span:first-child {
    flex: 1;
    font-weight: 600;
}

.field-type-tag {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 999px;
}

.order-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #eee;
    border-radius: 8px;
    cursor: pointer;
}

.order-item:hover {
    background: #f5f7fb;
}

.order-item-date {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}

.order-item-products {
    flex: 1;
    font-size: 14px;
}

.order-item-status {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 999px;
}

.order-item-total {
    font-weight: 600;
    white-space: nowrap;
}

.dropdown-category-card {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.dropdown-option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.dropdown-option-tag {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dropdown-option-tag button {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    line-height: 1;
}

.dropdown-option-tag button:hover {
    color: #b42318;
}

.dropdown-option-empty {
    font-size: 13px;
    color: #9ca3af;
}

.order-modal label {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-top: 10px;
    margin-bottom: 4px;
}

.order-modal input,
.order-modal select,
.order-modal textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.order-item-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Column labels above the item rows — .order-item-product/qty/price share
   this row's flex-basis rules too (below), so a header cell and its column
   underneath always line up regardless of how many item rows follow. */
.order-item-rows-header {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    color: #6b7280;
}

.order-item-remove-spacer {
    flex-shrink: 0;
    width: 36px;
}

.order-item-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.order-item-row .order-item-product,
.order-item-rows-header .order-item-product {
    flex: 2;
}

.order-item-row .order-item-qty,
.order-item-rows-header .order-item-qty {
    flex: 1;
    min-width: 60px;
}

.order-item-row .order-item-price,
.order-item-rows-header .order-item-price {
    flex: 1;
    min-width: 80px;
}

.order-item-row .order-item-remove {
    flex-shrink: 0;
    padding: 8px 10px;
}

.order-total {
    margin-top: 12px;
    font-weight: 600;
    text-align: right;
}

.order-item-row-readonly {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    font-size: 14px;
}

.order-item-row-price {
    color: #6b7280;
}

.order-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 10px;
}

.order-checklist-columns {
    display: flex;
    gap: 12px;
}

.order-checklist-column {
    flex: 1;
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    background: #fafafa;
}

.order-checklist-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.order-checklist-add-new {
    font-size: 12px;
    padding: 4px 10px;
}

.order-checklist-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.order-checklist-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.order-checklist-item-row:hover {
    border-color: #ccc;
}

.order-checklist-item-row-selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.order-checklist-item-row-done {
    background: #ecfdf3;
    border-color: #86efac;
}

.order-checklist-item-row-out-of-stock {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.order-checklist-status-icon {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
}

.order-checklist-label {
    flex: 1;
    font-size: 13px;
    color: #374151;
}

.order-checklist-detail {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
}

.order-checklist-detail-title {
    margin: 0 0 8px;
    font-size: 14px;
}

.order-checklist-detail label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-top: 8px;
    display: block;
}

.order-checklist-detail input,
.order-checklist-detail select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}

.checklist-config-column {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
    background: #fafafa;
}

.checklist-config-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.checklist-config-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
}

.checklist-config-add-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.checklist-config-add-row input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.field-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.order-row {
    cursor: pointer;
}

.order-row:hover {
    background: #f5f7fb;
}

.product-modal label {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-top: 10px;
    margin-bottom: 4px;
}

.product-modal input,
.product-modal textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.product-active-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row;
}

.product-row {
    cursor: pointer;
}

.product-row:hover {
    background: #f5f7fb;
}

.ai-analysis-result {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.line-linked-status {
    font-size: 14px;
    font-weight: 600;
    color: #06c755;
    margin-bottom: 10px;
}

.line-link-pending {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.line-link-qr {
    width: 180px;
    height: 180px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
}

.line-link-code {
    font-size: 15px;
}

.line-link-code strong {
    letter-spacing: 2px;
}