/* ==========================================================================
   BWA FormBuilder Pro - Bootstrap 5 Compatible Styles
   ========================================================================== */

/* ---------- Brand wiring ----------
   Each role resolves into a DISTINCT local var (--fbp-*) so there is NO
   self-reference cycle. Resolution order per role:
   1. recolor token (--bg/--text/--accent/...) injected by the stan AI Assist
      agent on this root class — wins when an editor recolors.
   2. inherited --bwa-form-builder-pro-* emitted at :root by
      BrandCorpusController from this plugin's manifest brandInheritance
      (folder slug "form-builder-pro") — the live BrandCorpus value.
   3. the literal fallback — the module's original default.
   Derived tones (muted/faint/border/surface-2) track --fbp-text/--fbp-bg so a
   dark recolor stays legible. The form is the single top-level container; all
   fields render inside it, so no sibling selector is needed.
   Validation red and success green are intentionally left functional. */
.fbp-form {
    --fbp-bg:         var(--bg,         var(--bwa-form-builder-pro-bg, #ffffff));
    --fbp-text:       var(--text,       var(--bwa-form-builder-pro-text, #212529));
    --fbp-accent:     var(--accent,     var(--bwa-form-builder-pro-accent, #0d6efd));
    --fbp-link:       var(--link,       var(--bwa-form-builder-pro-link, var(--fbp-accent)));
    --fbp-link-hover: var(--link-hover, var(--bwa-form-builder-pro-link-hover, color-mix(in srgb, var(--fbp-accent) 82%, #000)));
    --fbp-accent-ink: #ffffff;
    --fbp-muted:      color-mix(in srgb, var(--fbp-text) 62%, transparent);
    --fbp-faint:      color-mix(in srgb, var(--fbp-text) 45%, transparent);
    --fbp-border:     color-mix(in srgb, var(--fbp-text) 14%, transparent);
    --fbp-surface-2:  color-mix(in srgb, var(--fbp-text) 6%, var(--fbp-bg));
    /* Submit-button surface — separate from --fbp-accent so the submit CTA
       follows the brand BUTTON tokens (e.g. orange CTA) instead of the
       form's accent slot (which inherits from --bwa-color-primary, usually
       navy). Three-tier same as the others: explicit recolor token →
       brand-corpus button token → fbp-accent fallback. */
    --fbp-btn-bg:         var(--btn-bg,         var(--bwa-color-btn-bg,         var(--fbp-accent)));
    --fbp-btn-text:       var(--btn-text,       var(--bwa-color-btn-text,       var(--fbp-accent-ink)));
    --fbp-btn-border:     var(--btn-border,     var(--bwa-color-btn-border,     var(--fbp-btn-bg)));
    --fbp-btn-hover-bg:   var(--btn-hover-bg,   var(--bwa-color-btn-hover-bg,   var(--fbp-link-hover)));
    --fbp-btn-hover-text: var(--btn-hover-text, var(--bwa-color-btn-hover-text, var(--fbp-btn-text)));
    /* Typography — opt-in to corpus fonts even when form is mounted in an
       isolated container (modal, iframe) that doesn't inherit from body. */
    font-family: var(--bwa-font-body, inherit);
}

.fbp-form h1, .fbp-form h2, .fbp-form h3,
.fbp-form h4, .fbp-form h5, .fbp-form h6,
.fbp-form .fbp-section-title {
    font-family: var(--bwa-font-heading, var(--bwa-font-body, inherit));
}

/* ---------- Container & Layout ---------- */
.fbp-form {
    position: relative;
}

.fbp-form .row {
    --bs-gutter-x: 1rem;
}

.fbp-field-wrapper {
    margin-bottom: 1rem;
    transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.3s ease;
    overflow: hidden;
}

.fbp-field-wrapper.fbp-hidden {
    opacity: 0;
    max-height: 0 !important;
    margin-bottom: 0;
    padding: 0;
    pointer-events: none;
}

.fbp-field-wrapper.fbp-visible {
    opacity: 1;
    max-height: 500px;
}

/* ---------- Labels ---------- */
.fbp-label {
    font-weight: 500;
    margin-bottom: 0.375rem;
    display: block;
    color: var(--fbp-text);
}

.fbp-label .fbp-required-indicator {
    color: var(--bs-danger, #dc3545);
    margin-left: 0.25rem;
}

/* ---------- Controls ---------- */
.fbp-control {
    display: block;
    width: 100%;
}

.fbp-form .form-control,
.fbp-form .form-select {
    border-radius: var(--bwa-radius-md, 0.375rem);
}

/* ---------- Validation ---------- */
.fbp-validation-message {
    display: none;
    font-size: 0.875em;
    color: var(--bs-danger, #dc3545);
    margin-top: 0.25rem;
}

.fbp-field-wrapper.fbp-invalid .fbp-validation-message {
    display: block;
}

.fbp-field-wrapper.fbp-invalid .form-control,
.fbp-field-wrapper.fbp-invalid .form-select {
    border-color: var(--bs-danger, #dc3545);
}

.fbp-field-wrapper.fbp-valid .form-control,
.fbp-field-wrapper.fbp-valid .form-select {
    border-color: var(--bs-success, #198754);
}

/* ---------- Section ---------- */
.fbp-section {
    padding-top: 0.5rem;
}

.fbp-section h2,
.fbp-section h3,
.fbp-section h4,
.fbp-section h5,
.fbp-section h6 {
    margin-bottom: 0.5rem;
}

.fbp-section hr {
    margin-top: 0;
    margin-bottom: 0.5rem;
    border-top: var(--bwa-border-width, 1px) solid var(--fbp-border);
}

/* ---------- Rating Stars ---------- */
.fbp-rating {
    display: inline-flex;
    gap: 0.125rem;
    cursor: pointer;
}

.fbp-rating .fbp-star {
    font-size: 1.75rem;
    color: var(--fbp-faint);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
    user-select: none;
    line-height: 1;
}

.fbp-rating .fbp-star:hover,
.fbp-rating .fbp-star.active {
    color: var(--bs-warning, #ffc107);
}

.fbp-rating .fbp-star:hover {
    transform: scale(1.15);
}

.fbp-rating .fbp-star svg {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
}

/* ---------- Signature Pad ---------- */
.fbp-signature-wrapper {
    position: relative;
    display: inline-block;
}

.fbp-signature-canvas {
    border: var(--bwa-border-width-thick, 2px) solid var(--fbp-border);
    border-radius: var(--bwa-radius-md, 0.375rem);
    cursor: crosshair;
    touch-action: none;
    display: block;
}

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

.fbp-signature-clear {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: var(--bwa-space-1, 0.25rem) var(--bwa-space-2, 0.5rem);
    font-size: 0.75rem;
    background: var(--fbp-surface-2);
    border: var(--bwa-border-width, 1px) solid var(--fbp-border);
    border-radius: var(--bwa-radius-sm, 0.25rem);
    cursor: pointer;
    z-index: 2;
}

.fbp-signature-clear:hover {
    background: color-mix(in srgb, var(--fbp-text) 12%, var(--fbp-bg));
}

/* ---------- Toggle Switch ---------- */
.fbp-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: var(--bwa-space-2, 0.5rem);
}

.fbp-toggle-wrapper .form-check-input {
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
    margin: 0;
}

.fbp-toggle-status {
    font-size: 0.875rem;
    color: var(--fbp-muted);
    min-width: 2rem;
}

/* ---------- Slider ---------- */
.fbp-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fbp-slider-wrapper .form-range {
    flex: 1;
}

.fbp-slider-value {
    font-weight: 600;
    font-size: 0.875rem;
    min-width: 3rem;
    text-align: center;
    padding: var(--bwa-space-1, 0.25rem) var(--bwa-space-2, 0.5rem);
    background: var(--fbp-surface-2);
    border: var(--bwa-border-width, 1px) solid var(--fbp-border);
    border-radius: var(--bwa-radius-sm, 0.25rem);
    color: var(--fbp-text);
}

/* ---------- File Upload ---------- */
.fbp-file-dropzone {
    border: 2px dashed var(--fbp-border);
    border-radius: var(--bwa-radius-md, 0.5rem);
    padding: var(--bwa-space-4, 1.5rem);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    background: var(--fbp-surface-2);
}

.fbp-file-dropzone:hover,
.fbp-file-dropzone.fbp-dragover {
    border-color: var(--fbp-accent);
    background: color-mix(in srgb, var(--fbp-accent) 5%, transparent);
}

.fbp-file-dropzone .fbp-dropzone-icon {
    font-size: 2rem;
    color: var(--fbp-muted);
    margin-bottom: 0.5rem;
}

.fbp-file-dropzone .fbp-dropzone-text {
    color: var(--fbp-muted);
    font-size: 0.875rem;
}

.fbp-file-dropzone .fbp-dropzone-text strong {
    color: var(--fbp-accent);
}

.fbp-file-dropzone input[type="file"] {
    display: none;
}

.fbp-file-list {
    margin-top: 0.5rem;
    list-style: none;
    padding: 0;
}

.fbp-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.5rem;
    background: var(--fbp-surface-2);
    border: var(--bwa-border-width, 1px) solid var(--fbp-border);
    border-radius: var(--bwa-radius-sm, 0.25rem);
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    color: var(--fbp-text);
}

.fbp-file-remove {
    cursor: pointer;
    color: var(--bs-danger, #dc3545);
    font-weight: 700;
    padding: 0 0.25rem;
}

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

/* ---------- Messages ---------- */
.fbp-message {
    padding: var(--bwa-space-3, 1rem);
    border-radius: var(--bwa-radius-md, 0.375rem);
    margin-bottom: 1rem;
}

.fbp-message-success {
    background: var(--bs-success-bg-subtle, #d1e7dd);
    color: var(--bs-success-text-emphasis, #0a3622);
    border: var(--bwa-border-width, 1px) solid var(--bs-success-border-subtle, #a3cfbb);
}

.fbp-message-error {
    background: var(--bs-danger-bg-subtle, #f8d7da);
    color: var(--bs-danger-text-emphasis, #58151c);
    border: var(--bwa-border-width, 1px) solid var(--bs-danger-border-subtle, #f1aeb5);
}

/* ---------- Loading ---------- */
.fbp-loading {
    text-align: center;
    padding: var(--bwa-space-5, 2rem);
    color: var(--fbp-muted);
}

.fbp-loading-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.2rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: fbp-spin 0.75s linear infinite;
}

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

/* ---------- Submit Button ---------- */
.fbp-submit-wrapper {
    margin-top: 1rem;
}

.fbp-submit-btn {
    min-width: 8rem;
    clip-path: var(--bwa-notch-clip, none);
}

.fbp-submit-btn:disabled {
    cursor: not-allowed;
}

/* ---------- Theme: Minimal ---------- */
[data-formbuilder-pro-theme="minimal"] .fbp-form .form-control,
[data-formbuilder-pro-theme="minimal"] .fbp-form .form-select {
    border: none;
    border-bottom: var(--bwa-border-width-thick, 2px) solid var(--fbp-border);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

[data-formbuilder-pro-theme="minimal"] .fbp-form .form-control:focus,
[data-formbuilder-pro-theme="minimal"] .fbp-form .form-select:focus {
    border-bottom-color: var(--fbp-accent);
    box-shadow: none;
}

/* ---------- Theme: Card ---------- */
[data-formbuilder-pro-theme="card"] .fbp-form {
    background: var(--fbp-bg);
    border: var(--bwa-border-width, 1px) solid var(--fbp-border);
    border-radius: var(--bwa-radius-md, 0.5rem);
    padding: var(--bwa-space-4, 1.5rem);
    box-shadow: var(--bwa-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
}

/* ---------- Brand accent on Bootstrap form surfaces ----------
   Inputs/selects render with Bootstrap .form-control/.form-select; their focus
   ring uses --fbp-accent (the form's identity colour, brand primary). The
   submit button is a CTA — it uses the brand BUTTON tokens (--bwa-color-btn-*)
   instead, so it picks up the orange CTA colour an editor expects rather than
   the navy primary that --fbp-accent inherits from. Color only — no layout. */
.fbp-form .form-control:focus,
.fbp-form .form-select:focus {
    border-color: var(--fbp-accent);
}

.fbp-submit-btn.btn-primary,
.fbp-form .btn-primary {
    --bs-btn-bg: var(--fbp-btn-bg);
    --bs-btn-border-color: var(--fbp-btn-border);
    --bs-btn-color: var(--fbp-btn-text);
    --bs-btn-hover-bg: var(--fbp-btn-hover-bg);
    --bs-btn-hover-border-color: var(--fbp-btn-hover-bg);
    --bs-btn-hover-color: var(--fbp-btn-hover-text);
    --bs-btn-active-bg: var(--fbp-btn-hover-bg);
    --bs-btn-active-border-color: var(--fbp-btn-hover-bg);
}