/* =============================================
   FORMS - Field Cards & Drag-and-Drop
   Field card styling, drag handles, delete modal,
   column indicators, animations
   ============================================= */

/* ===== FIELD CARDS ===== */
.field-card { position: relative; cursor: default; background: var(--card-bg); border: 2px solid #e7e7eb; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, opacity 0.3s ease-out; }
.field-card:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(8, 145, 229, 0.12); transform: translateY(-2px); }
.field-card:not(.field-card-chosen):not(.field-card-ghost) { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.field-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.field-card:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8, 145, 229, 0.1); }

/* Field options container */
.field-options-container { animation: slideDown 0.3s ease; display: none; }
.field-options-container.show { display: block; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Delete field modal */
#deleteFieldModal .modal-header { border-bottom: 2px solid rgba(255, 255, 255, 0.2); }
#deleteFieldModal .modal-body { padding: 1.5rem; }
#deleteFieldModal .alert-warning { background-color: #fff3cd; border-color: #ffc107; padding: 0.75rem; border-radius: 0.375rem; }
#deleteFieldModal #deleteFieldName { font-size: 1.1rem; display: block; word-break: break-word; }

/* Delete button */
.field-card .remove-field-btn { transition: all 0.2s ease; }
.field-card .remove-field-btn:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3); }
.field-card .remove-field-btn:active { transform: scale(0.95); }

/* ===== DRAG AND DROP ===== */
.drag-handle { cursor: grab !important; pointer-events: auto !important; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; touch-action: none !important; z-index: 10 !important; position: relative; transition: all 0.2s ease; }
.drag-handle * { pointer-events: none; }
.drag-handle:hover { color: var(--bs-primary, #007bff) !important; transform: scale(1.1); outline: 2px solid rgba(0, 123, 255, 0.3); background: rgba(0, 123, 255, 0.05); border-radius: 4px; }
.drag-handle:active { cursor: grabbing !important; transform: scale(0.95); outline-color: rgba(0, 123, 255, 0.6); background: rgba(0, 123, 255, 0.1); }
.drag-handle:focus { outline: 2px solid var(--bs-primary, #007bff); outline-offset: 2px; border-radius: 4px; }

.field-card-header { pointer-events: auto; position: relative; }
.field-card-header > * { pointer-events: auto; }
.field-card-header [data-bs-toggle="collapse"] { pointer-events: auto; cursor: pointer; }
.field-card-header > div[data-bs-toggle="collapse"] { cursor: pointer; }
.field-card-header .btn { z-index: 5; position: relative; }

.field-card-ghost { opacity: 0.4; background: #f8f9fa; border: 2px dashed #6c757d; transition: opacity 0.15s ease; }
.field-card-chosen { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); transform: scale(1.03); transition: transform 0.15s ease, box-shadow 0.15s ease; z-index: 1000; cursor: grabbing !important; }
.field-card-drag { opacity: 0.8; transform: rotate(2deg); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease; }

body.field-dragging { cursor: grabbing !important; }
body.field-dragging * { cursor: grabbing !important; }
.field-dragging .field-collapse-icon { pointer-events: none; }
.field-dragging .field-card * { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

#fields-container { min-height: 100px; position: relative; }
#fields-container:empty::before { content: "Drag fields here or click 'Add Field' to get started"; display: block; text-align: center; padding: 40px 20px; color: var(--text-muted); font-style: italic; border: 2px dashed #dee2e6; border-radius: 8px; background: var(--background); }
#fields-container:empty::after, .fields-container:empty::after { content: "No fields added yet. Click 'Add Field' to get started."; display: block; text-align: center; padding: 3rem 1rem; color: var(--text-muted); background: var(--background); border-radius: 8px; border: 2px dashed #d1d5db; font-size: 1rem; }
#no-fields-message { text-align: center; padding: 3rem 1rem; color: var(--text-muted); background: var(--background); border-radius: 8px; border: 2px dashed #d1d5db; }
#no-fields-message i { font-size: 2.5rem; color: var(--accent); margin-bottom: 1rem; display: block; }

/* Animations */
.field-card.newly-added { animation: slideIn 0.3s ease-out; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.field-card.just-added { animation: fieldAdded 0.3s ease-out; }
@keyframes fieldAdded { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }

/* Drag visual feedback */
.field-card.dragging { opacity: 0.5; border: 2px dashed var(--primary); background: rgba(8, 145, 229, 0.05); }
.field-card.drag-over { border-top: 3px solid var(--accent); }
.fields-container.drag-active { background: rgba(6, 182, 212, 0.03); border-radius: 8px; }

/* Conditional visibility indicator */
.field-card.has-conditions { position: relative; }
.field-card.has-conditions::after { content: "\f472"; font-family: 'bootstrap-icons'; position: absolute; top: 0.5rem; right: 3rem; color: var(--accent); font-size: 1rem; }

/* Column indicators */
.field-card[data-field-column="0"] { border-left: 4px solid var(--primary); }
.field-card[data-field-column="1"] { border-left: 4px solid var(--accent); }
.field-card[data-field-column=""], .field-card:not([data-field-column]) { border-left: 4px solid #e7e7eb; }
.field-column-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 12px; font-weight: 600; }
.field-column-badge.left { background: rgba(8, 145, 229, 0.1); color: var(--primary); }
.field-column-badge.right { background: rgba(6, 182, 212, 0.1); color: var(--accent); }
.field-column-badge.span { background: var(--background); color: var(--text-muted); }

/* ===== FIELD DARK MODE ===== */
body.theme-dark .field-card { background: var(--card-bg) !important; border-color: #334155 !important; }
body.theme-dark .field-card:hover { border-color: var(--primary) !important; box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15) !important; }
body.theme-dark .field-card[data-field-column=""], body.theme-dark .field-card:not([data-field-column]) { border-left-color: #334155 !important; }
body.theme-dark .field-card-ghost { background: #1e293b !important; border-color: #475569 !important; }
body.theme-dark #fields-container:empty::before { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; }
body.theme-dark #fields-container:empty::after, body.theme-dark .fields-container:empty::after { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; }
body.theme-dark #no-fields-message { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; }

/* ===== FIELD CARD HEADER --- Dark Mode =====
 * The card header uses an inline gradient style from the Razor partial and JS,
 * so we must use !important to override it in dark mode.
 */
body.theme-dark .field-card .field-card-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-color: #334155 !important;
}

/* Field header label and badge text */
body.theme-dark .field-card .field-header-label {
    color: #e2e8f0 !important;
}

body.theme-dark .field-card .field-type-badge {
    background: #334155 !important;
    color: #94a3b8 !important;
}

body.theme-dark .field-card .field-collapse-icon {
    color: #94a3b8 !important;
}

/* Drag handle in dark mode */
body.theme-dark .field-card .drag-handle {
    color: #64748b !important;
}

body.theme-dark .field-card .drag-handle:hover {
    color: #818cf8 !important;
    outline-color: rgba(129, 140, 248, 0.3);
    background: rgba(129, 140, 248, 0.05);
}

/* Form labels inside field cards */
body.theme-dark .field-card .form-label,
body.theme-dark .field-card .form-label-sm {
    color: #e2e8f0 !important;
}

/* Form controls inside field cards */
body.theme-dark .field-card .form-control,
body.theme-dark .field-card .form-select {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.theme-dark .field-card .form-control::placeholder {
    color: #64748b !important;
}

/* Checkbox and radio labels inside field cards */
body.theme-dark .field-card .form-check-label {
    color: #cbd5e1 !important;
}

/* Accordion buttons inside field cards (Validation, Conditional Logic, etc.) */
body.theme-dark .field-card .accordion-button {
    background: transparent !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.theme-dark .field-card .accordion-button::after {
    filter: invert(0.7);
}

body.theme-dark .field-card .accordion-button.collapsed {
    color: #94a3b8 !important;
}

body.theme-dark .field-card .accordion-item {
    border-color: #334155 !important;
    background: transparent !important;
}

body.theme-dark .field-card .accordion-collapse {
    background: transparent !important;
}

body.theme-dark .field-card .accordion-body {
    color: #e2e8f0 !important;
}

@media (max-width: 768px) {
    .drag-handle { font-size: 1.2rem; padding: 4px; }
    .field-card-chosen { transform: scale(1.01); }
}
/* Compact multi-step controls inside the form builder */
.step-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-height: 8.5rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.step-pill {
    display: inline-flex;
    align-items: stretch;
    min-height: 2rem;
    border: 1px solid var(--bs-border-color, #334155);
    border-radius: 0.375rem;
    overflow: hidden;
    background: rgba(13, 110, 253, 0.08);
}

.step-pill.active {
    border-color: var(--bs-primary, #0d6efd);
    background: var(--bs-primary, #0d6efd);
    color: #fff;
}

.step-pill-main,
.step-pill-remove {
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
}

.step-pill-main {
    padding: 0.45rem 0.7rem;
    font-weight: 600;
}

.step-pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.step-pill:not(.active) .step-pill-remove {
    border-left-color: var(--bs-border-color, #334155);
}

.step-pill-remove:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.step-add-btn {
    min-height: 2rem;
}

/* Bulk field selection */
.field-select-control {
    display: none;
    align-items: center;
    justify-content: center;
    margin-right: 0.35rem;
    min-width: 1.5rem;
}

.field-bulk-select-mode .field-select-control {
    display: inline-flex;
}

.field-card.field-selected {
    border-color: var(--bs-danger, #dc3545) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18) !important;
}

.field-bulk-select {
    cursor: pointer;
}

#bulkSelectFieldsBtn.active {
    color: #fff;
    background: var(--bs-secondary, #6c757d);
    border-color: var(--bs-secondary, #6c757d);
}

/* Active step affordance */
.step-pill.active {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.24);
}

.step-pill.active .step-pill-main {
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

.step-context-line {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 1.8rem;
    margin-top: 0.35rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(14, 165, 233, 0.35);
    border-radius: 0.375rem;
    background: rgba(14, 165, 233, 0.12);
    color: #bae6fd;
    font-size: 0.82rem;
}

.step-context-line strong {
    color: #ffffff;
}

.bulk-delete-toggle {
    border-color: #f59e0b !important;
    background: #fbbf24 !important;
    color: #111827 !important;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.28), 0 6px 16px rgba(251, 191, 36, 0.18);
}

#bulkSelectFieldsBtn.active {
    color: #ffffff !important;
    background: #dc2626 !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.24) !important;
}

.field-bulk-select-mode .field-card:not([style*="display: none"]) .field-card-header {
    outline: 1px dashed rgba(251, 191, 36, 0.45);
    outline-offset: -3px;
}

.field-bulk-select-mode .field-select-control {
    display: inline-flex;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.375rem;
    background: rgba(251, 191, 36, 0.16);
}

.field-bulk-select {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}
.field-card > .field-select-control-fallback {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 30;
}

.field-bulk-select-mode .field-card {
    padding-left: 2.75rem;
}

.field-bulk-select-mode .field-card > .field-select-control-fallback {
    display: inline-flex !important;
}

/* Form builder field-card partial */
.field-card .field-card-header:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
}

.field-collapse-icon {
    transition: transform 0.2s ease-in-out;
}

.field-card .accordion-button {
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid #e9ecef;
}

.field-card .accordion-button:not(.collapsed) {
    color: var(--bs-primary);
    background: transparent;
}

.field-card .accordion-button::after {
    width: 0.8rem;
    height: 0.8rem;
    background-size: 0.8rem;
}

.field-type-badge {
    font-size: 0.7rem;
    padding: 0.25em 0.5em;
}

.conditional-rules-list .alert {
    font-size: 0.8rem;
}

.conditional-logic-ui {
    background: #f8f9fa;
    border-radius: 0.375rem;
    padding: 0.75rem;
}

#appearanceCollapse .input-group input[type="text"] {
    min-width: 9.5rem;
}

#appearanceCollapse .form-control-color {
    flex: 0 0 2.75rem;
    min-width: 2.75rem;
}

/* Form field card inline-style extraction */
.field-card-header--editor {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.field-header-label--compact {
    max-width: 200px;
}

.conditional-rules-count {
    display: none;
}

/* Responsive signature pad used by public intake forms. */
.signature-field {
    width: 100%;
}

.signature-wrapper {
    position: relative;
    width: 100%;
    min-height: 9.5rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 0.5rem;
    background: #fff;
    touch-action: none;
}

.signature-wrapper:focus-within {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2);
}

.signature-canvas {
    display: block;
    width: 100%;
    height: 9.5rem;
    cursor: crosshair;
    touch-action: none;
}

.signature-tools {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.signature-field.signature-invalid .signature-wrapper {
    border-color: var(--bs-danger, #dc3545);
}

.signature-field.signature-invalid .signature-required-message {
    display: block;
}