/* ======================================================================
   🔒 AI PROTECTION: DO NOT MODIFY
   Feature: Form Builder — form_renderer.css
   Protected by: Code Protector Module
   Date: 2026-02-27 04:07:27
   ====================================================================== */
/* Form Renderer - Frontend Styles */

.fb-form {
    max-width: 100%;
}

.fb-field-wrapper {
    margin-bottom: 28px;
}

/* Image option containers (radio/checkbox with images) — breathing room above.
   Note: the PHP template also applies inline padding: 10px 0 on every container,
   so effective top spacing = 20px margin + 10px inline padding = 30px total. */
.fb-image-options-container {
    margin-top: 20px;
}

.fb-field-wrapper label {
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 5px;
    display: block;
}

.fb-field-wrapper .help-block {
    margin-top: 5px;
    font-size: 13px;
    /* Slightly smaller than input text */
}

/* Textarea resize - vertical only (no width adjustment) */
.fb-form textarea,
.fb-repeater-item textarea {
    resize: vertical;
}

/* Description styling */
.field-description {
    font-size: 13px;
    color: var(--at-color-card-foreground);
    /* Standard localized muted color */
    margin-top: 4px;
    margin-bottom: 8px;
}

/* Section styling */
.fb-field-wrapper[data-type="section"] h5 {
    border-bottom: 1px solid var(--at-color-border);
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: var(--at-color-card-foreground);
    font-weight: 600;
}

/* Primary Section Break Line - ensures visibility */
.fb-section-break-line {
    border: none;
    border-top: 1px solid var(--at-color-border);
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Nested Section/Divider in Repeaters - One Source of Truth */
.fb-section-divider {
    border-bottom: 1px solid var(--at-color-border);
    padding-bottom: 5px;
    margin: 10px 0;
}

/* Page Break */
.fb-page-break {
    margin: 30px 0;
    clear: both;
}

/* Progress Bar */
.fb-progress-container {
    height: 20px;
    background-color: var(--at-color-muted);
    border-radius: 5px;
    overflow: visible;
    margin-bottom: 20px;
}

.fb-progress-bar {
    height: 100%;
    background-color: var(--at-color-primary, #4e73df);
    transition: width 0.3s ease;
    line-height: 20px;
    font-size: 11px;
    font-weight: 500;
    color: var(--at-color-card-foreground);
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    position: relative;
}

/* ===== Numbered Steps Progress Indicator ===== */
.fb-numbered-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
    position: relative;
    padding: 0 10px;
}

/* Connector line between steps */
.fb-numbered-steps::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 40px;
    right: 40px;
    height: 2px;
    background-color: var(--at-color-muted);
    z-index: 0;
}

.fb-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

.fb-step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--at-color-muted);
    color: var(--at-color-card-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* THE STEP NUMBER, AND THE INK THAT BELONGS ON IT.
   The active step is filled with the form's own progress colour, and the
   number on it was taking the ink meant for a CARD — two colours from two
   different places, never checked against each other. Measured at 1.45:1,
   which is no number at all.
   The form already chooses a matching ink for this area and it simply was
   not being used; it is used now, and where a form has chosen nothing the
   pair falls back to the theme's own primary and the ink made to sit on it,
   which is a readable pair on every preset. Not one hard-coded colour is
   left here, so these follow a theme rather than ignoring it. */
.fb-step-number.completed {
    background-color: var(--at-color-card);
    color: var(--at-color-primary);
    border: 2px solid var(--fb-progress-color, var(--at-color-primary));
}

.fb-step-number.active {
    background-color: var(--fb-progress-color, var(--at-color-primary));
    color: var(--fb-progress-text, var(--at-color-primary-foreground));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fb-progress-color, var(--at-color-primary)) 25%, transparent);
}

.fb-step-label {
    font-size: 11px;
    color: var(--at-color-card-foreground);
    text-align: center;
    max-width: 100px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-step-label.active,
.fb-step-label.completed {
    color: var(--at-color-card-foreground);
    font-weight: 500;
}

/* Simple Steps (numbers only, no labels) */
.fb-simple-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.fb-simple-steps .fb-step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--at-color-muted);
    transition: all 0.3s ease;
}

.fb-simple-steps .fb-step-dot.completed {
    background-color: var(--at-color-card);
    border: 2px solid var(--fb-progress-color, var(--at-color-primary));
}

.fb-simple-steps .fb-step-dot.active {
    /* Same pair as the numbered steps above — the theme's own colour when a
       form has not chosen one, never a fixed blue that ignores the theme. */
    background-color: var(--fb-progress-color, var(--at-color-primary));
}

.fb-simple-steps .fb-step-dot.active {
    transform: scale(1.3);
}

/* Step Shapes */
.fb-step-number.shape-square {
    border-radius: 0;
}

.fb-step-number.shape-rounded {
    border-radius: 6px;
}

.fb-step-number.shape-diamond {
    border-radius: 0;
    transform: rotate(45deg);
}

.fb-step-number.shape-diamond span {
    transform: rotate(-45deg);
}

.fb-step-number.shape-text-only {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 14px;
}

/* Form Container Effects */
.fb-form-container.fx-shadow {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--at-color-foreground, #000) 15%, transparent);
}

.fb-form-container.fx-glow {
    box-shadow: 0 0 20px color-mix(in srgb, var(--at-color-accent) 40%, transparent);
}

.fb-form-container.fx-bevel {
    box-shadow: inset 2px 2px 4px color-mix(in srgb, var(--at-color-foreground, #000) 50%, transparent),
        inset -2px -2px 4px color-mix(in srgb, var(--at-color-foreground) 10%, transparent);
}

.fb-form-container.fx-emboss {
    box-shadow: 2px 2px 4px color-mix(in srgb, var(--at-color-foreground, #000) 20%, transparent),
        -2px -2px 4px color-mix(in srgb, var(--at-color-foreground) 70%, transparent);
}

.fb-form-container.fx-reflection {
    position: relative;
}

.fb-form-container.fx-reflection::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 10%;
    right: 10%;
    height: 30px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--at-color-foreground, #000) 10%, transparent), transparent);
    border-radius: 50%;
    transform: scaleY(0.3);
}

.fb-form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--at-color-border);
    clear: both;
}

/* Required Star */
.required-star {
    color: var(--at-color-destructive-ink);
    margin-left: 3px;
}

/* Form Group overrides if necessary */
.form-group {
    margin-bottom: 0;
    /* Wrapper handles spacing */
}

/* ==========================================================================
   Toggle Switch Styles
   ========================================================================== */

.fb-toggle-wrapper {
    display: inline-block;
    position: relative;
    user-select: none;
    vertical-align: middle;
    --t-on-color: var(--at-color-status-success, #84c529);
    --t-off-color: var(--at-color-border, #d4d4d4);
    --t-handle: var(--at-color-card, #ffffff);
    --t-height: 26px;
    --t-gutter: 3px;
    --t-width-on: 60px;
    --t-width-off: 60px;
}

.fb-toggle-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.fb-toggle-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 0 solid var(--at-color-border);
    border-radius: 20px;
    margin: 0;
    width: var(--t-width-off);
    height: var(--t-height);
    background-color: var(--t-off-color);
    transition: background-color 0.3s, width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.fb-toggle-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s;
    height: 100%;
}

.fb-toggle-inner:before,
.fb-toggle-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 100%;
    padding: 0;
    line-height: var(--t-height);
    color: var(--at-color-card-foreground);
    font-family: sans-serif;
    font-weight: bold;
    box-sizing: border-box;
    white-space: nowrap;
}

.fb-toggle-inner:before {
    content: attr(data-on);
    padding-right: calc(var(--t-height) - 5px);
    padding-left: 5px;
    background-color: var(--t-on-color);
    color: var(--at-color-card-foreground);
    text-align: center;
}

.fb-toggle-inner:after {
    content: attr(data-off);
    padding-left: calc(var(--t-height) - 5px);
    padding-right: 5px;
    background-color: var(--t-off-color);
    color: var(--at-color-card-foreground);
    text-align: center;
}

.fb-toggle-switch {
    display: block;
    width: calc(var(--t-height) - (var(--t-gutter) * 2));
    height: calc(var(--t-height) - (var(--t-gutter) * 2));
    background: var(--t-handle);
    position: absolute;
    top: var(--t-gutter);
    bottom: var(--t-gutter);
    right: calc(100% - var(--t-height) + var(--t-gutter));
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 1px 1px 3px color-mix(in srgb, var(--at-color-foreground, #000) 20%, transparent);
    z-index: 5;
}

/* CHECKED STATE */
.fb-toggle-checkbox:checked+.fb-toggle-label .fb-toggle-inner {
    margin-left: 0;
}

.fb-toggle-checkbox:checked+.fb-toggle-label .fb-toggle-switch {
    right: var(--t-gutter);
    background-color: var(--at-color-card);
}

.fb-toggle-checkbox:checked+.fb-toggle-label {
    background-color: var(--t-on-color);
    width: var(--t-width-on);
}

/* TOGGLE STYLE: iOS */
.fb-toggle-style-ios .fb-toggle-label {
    background-color: var(--at-color-muted);
    border-radius: 20px;
}

.fb-toggle-style-ios .fb-toggle-checkbox:checked+.fb-toggle-label {
    background-color: var(--t-on-color);
}

.fb-toggle-style-ios .fb-toggle-inner:before,
.fb-toggle-style-ios .fb-toggle-inner:after {
    background-color: transparent;
}

.fb-toggle-style-ios .fb-toggle-switch {
    box-shadow: 0 2px 4px color-mix(in srgb, var(--at-color-foreground, #000) 20%, transparent);
}

/* TOGGLE STYLE: Square */
.fb-toggle-style-square .fb-toggle-label,
.fb-toggle-style-square .fb-toggle-switch {
    border-radius: 0;
}

/* TOGGLE STYLE: Flat */
.fb-toggle-style-flat .fb-toggle-label {
    background-color: var(--t-off-color);
    border-radius: 4px;
}

.fb-toggle-style-flat .fb-toggle-switch {
    background: var(--at-color-card);
    border-radius: 2px;
}

.fb-toggle-style-flat .fb-toggle-inner:after {
    color: var(--at-color-card-foreground);
}

/* TOGGLE STYLE: Skewed */
.fb-toggle-style-skewed .fb-toggle-label {
    transform: skew(-10deg);
    border-radius: 0;
}

.fb-toggle-style-skewed .fb-toggle-switch {
    transform: skew(10deg);
    border-radius: 0;
    margin-right: -5px;
}

.fb-toggle-style-skewed .fb-toggle-inner:before,
.fb-toggle-style-skewed .fb-toggle-inner:after {
    transform: skew(10deg);
    text-align: center;
    width: 50%;
    padding: 0;
}

/* Hidden Fields — collapse wrapper so it takes no visual space */
.fb-field-wrapper[data-type="hidden"] {
    padding: 0;
    margin: 0;
    height: 0;
    overflow: hidden;
    min-height: 0;
}

/* On preview pages, show the hidden field indicator */
.fb-preview-container .fb-field-wrapper[data-type="hidden"] {
    height: auto;
    overflow: visible;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ==========================================================================
   Collapsible Sections
   ========================================================================== */

/* Section Header Base */
.fb-field-wrapper[data-type="section"] {
    clear: both;
}

.fb-section-header {
    margin-top: 10px;
    margin-bottom: 15px;
}

/* "None" (normal) section — tighter spacing, no collapsible behavior */
.fb-section-none {
    margin-bottom: 0;
}

.fb-section-none .fb-section-header {
    margin-bottom: 5px;
}

.fb-section-header .fb-section-title {
    margin: 0 0 5px 0;
    font-weight: 600;
    color: var(--at-color-card-foreground);
}

/* Collapsible Section Styling */
.fb-section-collapsible {
    cursor: pointer;
    padding: 10px 14px;
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-radius: 6px;
    margin-bottom: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

/* Section wrapper: use standard Bootstrap col padding to align with sibling fields */
.fb-section-wrapper {
    padding-left: 15px;
    padding-right: 15px;
}

.fb-section-wrapper .form-group {
    margin-bottom: 0;
}

/* Space between expanded section content and the next section header */
.fb-section-collapsible {
    margin-top: 30px;
    clear: both;
}

.fb-section-collapsible:hover {
    background: var(--at-color-muted);
    border-color: var(--at-color-border);
}

.fb-section-collapsible .fb-section-title {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fb-section-collapsible .fb-section-description {
    margin: 8px 0 0 0;
    font-size: 13px;
}

.fb-section-collapsible .fb-section-break-line {
    display: none;
    /* Hide break line for collapsible sections */
}

/* Toggle Icon */
.fb-section-toggle {
    transition: transform 0.3s ease;
    color: var(--at-color-card-foreground);
    font-size: 14px;
}

.fb-section-collapsed .fb-section-toggle {
    transform: rotate(180deg);
}

/* Section Content Wrapper */
.fb-section-content {
    padding: 0 22px 25px;
    overflow: hidden;
}

/* Section End Marker (Last collapsible) */
.fb-section-end {
    display: none;
    /* Hide the end marker visually */
}

/* Also hide the parent wrapper of section-end markers so they
   take zero vertical space — prevents uneven gaps between tabs */
.fb-section-wrapper:has(.fb-section-end) {
    display: none;
}

/* Reliable class-based collapse for section-end wrappers (no :has() needed) */
.fb-section-end-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

/* Fallback for browsers without :has() support */
.fb-section-wrapper[data-type="section"] .fb-section-end {
    display: none;
}

/* Initial hide for collapsed sections — prevents flash of content before JS loads.
   PHP adds .fb-collapsed-child to fields between a collapsed start and its end marker.
   Uses .fb-form-page ancestor for specificity to beat Bootstrap col-md-* (0,2,0). */
.fb-form-page .fb-collapsed-child {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: none;
}

/* Once JS wraps the fields in .fb-section-content, remove the initial hide.
   Specificity (0,3,0) beats the hide rule above (0,2,0).
   CRITICAL: padding-left/right MUST be 15px to preserve Bootstrap col-md-* gutters.
   The old `padding: revert` resolved to the browser default (0), which stripped the
   gutters and caused adjacent col-md-6 fields to render with no gap between them. */
.fb-form-page .fb-section-content .fb-field-wrapper {
    opacity: 1;
    max-height: none;
    overflow: visible;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Fields still in collapsed state within a section-content wrapper */
.fb-form-page .fb-section-content .fb-field-wrapper.fb-collapsed-child {
    opacity: 1;
    max-height: none;
    overflow: visible;
}

/* ==========================================================================
   File Upload & Lightbox Styles
   ========================================================================== */

.fb-file-upload-wrapper {
    width: 100%;
}

.fb-file-dropzone {
    border: 2px dashed var(--at-color-border);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    background: var(--at-color-card);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.fb-file-dropzone:hover,
.fb-file-dropzone.dragover {
    border-color: var(--at-color-primary, #4e73df);
    background: var(--at-color-card);
}

.fb-file-dropzone.dragover {
    transform: scale(1.02);
}

.fb-file-dropzone-icon {
    font-size: 36px;
    color: var(--at-color-card-foreground);
    margin-bottom: 10px;
}

.fb-file-dropzone-text {
    font-size: 14px;
    color: var(--at-color-card-foreground);
    margin-bottom: 10px;
}

.fb-file-dropzone-text strong {
    color: var(--at-color-primary);
    cursor: pointer;
}

.fb-file-dropzone-hint {
    font-size: 12px;
    color: var(--at-color-card-foreground);
}

.fb-file-input-hidden {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.fb-file-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
}

.fb-file-preview-item {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid var(--at-color-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--at-color-card);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fb-file-preview-item:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--at-color-foreground, #000) 15%, transparent);
    transform: translateY(-2px);
}

.fb-file-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fb-file-preview-item .fb-file-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--at-color-card-foreground);
    background: var(--at-color-card);
}

.fb-file-preview-item .fb-file-name {
    display: none;
    /* Hide name in grid view by default or show on hover? kept hidden for now to match layout */
}

/* Remove button */
.fb-file-preview-item .fb-file-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: var(--at-color-destructive);
    color: var(--at-color-card-foreground);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.fb-file-preview-item:hover .fb-file-remove {
    opacity: 1;
}

/* Drag handle */
.fb-file-drag-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: var(--at-color-card);
    color: var(--at-color-card-foreground);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}

.fb-file-preview-item:hover .fb-file-drag-handle {
    opacity: 1;
}

.fb-file-sortable-placeholder {
    width: 100px;
    height: 100px;
    border: 2px dashed var(--at-color-primary, #4e73df);
    border-radius: 8px;
    background: var(--at-color-card);
    margin: 5px;
}

/* Lightbox Modal */
.fb-file-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--at-color-card);
    align-items: center;
    justify-content: center;
}

.fb-file-modal.active {
    display: flex;
}

.fb-file-modal-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
    text-align: center;
}

.fb-file-modal-content img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 4px;
    box-shadow: 0 10px 40px color-mix(in srgb, var(--at-color-foreground, #000) 50%, transparent);
}

.fb-file-modal-content iframe {
    width: 80vw;
    height: 80vh;
    border: none;
    border-radius: 4px;
    background: var(--at-color-card);
}

.fb-file-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: var(--at-color-card-foreground);
    font-size: 28px;
    cursor: pointer;
}

.fb-file-modal-filename {
    color: var(--at-color-card-foreground);
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    display: block;
}

/* ==========================================================================
   Radio & Checkbox Option Label Alignment (Nested Fields)
   ========================================================================== */

/* Align option text vertically with radio circles and checkbox squares */
.fb-radio-option,
.fb-checkbox-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.fb-radio-option input[type="radio"],
.fb-checkbox-option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

/* =================================================================
   Multiselect Tags Display - Vertical Stacking Layout
   ================================================================= */
.fb-multiselect-tags {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.fb-multiselect-tags .fb-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--at-color-card-foreground);
}

.fb-multiselect-tags .fb-tag-remove {
    cursor: pointer;
    color: var(--at-color-destructive-ink);
    font-size: 18px;
    font-weight: bold;
    margin-left: 12px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.fb-multiselect-tags .fb-tag-remove:hover {
    opacity: 1;
}

/* Hide the bootstrap-select button when tags are displayed */
.fb-hide-selected-options .btn.dropdown-toggle .filter-option {
    display: none;
}

.fb-hide-selected-options .btn.dropdown-toggle::after {
    margin-left: 0;
}

/* Make the selectpicker dropdown button border grey to distinguish from the blue search input */
.bootstrap-select>.btn.dropdown-toggle,
.bootstrap-select>.btn.dropdown-toggle:hover,
.bootstrap-select>.btn.dropdown-toggle:focus,
.bootstrap-select>.btn.dropdown-toggle:active,
.bootstrap-select>.btn.dropdown-toggle.bs-placeholder,
.bootstrap-select.open>.btn.dropdown-toggle,
.form-group .bootstrap-select>.btn.dropdown-toggle {
    border-color: var(--at-color-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Ensure form containers don't clip dropdown menus.
   Uses double-class specificity instead of !important. */
.fb-form-page.fb-form-page,
.fb-form-container.fb-form-container,
.fb-field-wrapper.fb-field-wrapper {
    overflow: visible;
}

/* Clearfix: Bootstrap col-md-* classes use float:left, so parents
   need to clear floats to report their true height. Without this,
   the page won't scroll because the browser thinks the container
   is 0px tall. */
.fb-form-page::after,
.fb-preview-container::after,
.fb-form-container::after {
    content: "";
    display: table;
    clear: both;
}

/* The JS-created section wrapper should NOT float — remove the
   float that col-md-12 adds so the parent can contain it. */
.fb-section-content {
    float: none;
    width: 100%;
    margin-bottom: 15px;
}

/* Toggled by JS after slideDown completes, removed before slideUp starts.
   Allows dropdown menus inside expanded sections to render without clipping
   while preserving the slide animation which requires overflow:hidden. */
.fb-section-content.fb-section-expanded {
    overflow: visible;
}

/* Auto-position dropdown menus that overflow viewport */
.bootstrap-select .dropdown-menu {
    max-height: 250px;
}

/* =================================================================
   Nested Selectpicker Dropdown Fixes (Repeater Staff/Customer fields)
   ================================================================= */

/* When dropdown opens upward (dropup), position above button and limit height */
.fb-repeater-item .dropup .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 2px;
    max-height: 300px;
}

/* Target the inner scrollable container used by Bootstrap-Select */
.fb-repeater-item .dropup .dropdown-menu .inner {
    max-height: 250px;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════
   Preview Dev Toolbar (preview page only)
   ═══════════════════════════════════════════════════════════════ */
#fb-preview-toolbar {
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 15px;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--at-color-foreground, #000) 8%, transparent);
}

.fpt-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.fpt-row:last-of-type {
    margin-bottom: 0;
}

.fpt-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fpt-divider {
    width: 1px;
    height: 24px;
    background: var(--at-color-card);
    margin: 0 6px;
}

/* Base button */
.fpt-btn,
.fpt-toggle,
.fpt-pill {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    background: var(--at-color-muted);
    color: var(--at-color-card-foreground);
}

.fpt-btn:hover,
.fpt-toggle:hover,
.fpt-pill:hover {
    background: var(--at-color-muted);
    color: var(--at-color-card-foreground);
    border-color: var(--at-color-border);
}

.fpt-btn:focus,
.fpt-toggle:focus,
.fpt-pill:focus {
    outline: none;
}

/* Active state for toggles and pills */
.fpt-toggle.active,
.fpt-pill.active {
    background: var(--at-color-accent, #03a9f4);
    color: var(--at-color-card-foreground);
    border-color: var(--at-color-accent, #03a9f4);
    box-shadow: 0 0 4px color-mix(in srgb, var(--at-color-accent, #03a9f4) 30%, transparent);
}

/* A BUTTON THAT IS FILLED NEEDS THE INK MADE FOR THAT FILL.
   These took the ink meant for a CARD while being filled with a status or
   accent colour — two colours chosen in different places and never checked
   against each other. Measured at 1.62:1 on the fill-with-test-data button:
   a brand-blue icon on amber, which is no icon at all. Each fill now takes
   its own paired ink, which the theme guarantees is readable on it. */
.fpt-btn.active {
    background: var(--at-color-status-warning);
    color: var(--at-color-status-warning-foreground);
    border-color: var(--at-color-status-warning);
}

/* Expand/Collapse section buttons use the accent colour when active */
.fpt-btn.fpt-section-toggle.active {
    background: var(--at-color-accent);
    color: var(--at-color-accent-foreground);
    border-color: var(--at-color-accent);
    box-shadow: 0 0 4px color-mix(in srgb, var(--at-color-accent) 30%, transparent);
}

.fpt-btn i,
.fpt-toggle i,
.fpt-pill i {
    margin-right: 3px;
    color: var(--at-color-card-foreground);
}

/* The icon follows its own button's ink rather than naming a colour of its
   own — so whatever a filled button is wearing, the icon on it matches. */
.fpt-toggle.active i,
.fpt-pill.active i,
.fpt-btn.active i {
    color: inherit;
}

/* Page pills */
.fpt-pill {
    border-radius: 12px;
    padding: 4px 10px;
    min-width: 32px;
    text-align: center;
}

/* ── Overlay Badges ── */
.fpt-key-badge {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    background: var(--at-color-muted);
    color: var(--at-color-primary);
    border: 1px solid var(--at-color-accent, #90caf9);
    border-radius: 3px;
    padding: 1px 6px;
    margin-bottom: 4px;
    vertical-align: middle;
}

.fpt-cond-badge {
    font-size: 10px;
    background: var(--at-color-muted);
    color: var(--at-color-status-warning-ink);
    border: 1px solid var(--at-color-status-warning);
    border-radius: 3px;
    padding: 3px 8px;
    margin-bottom: 4px;
    word-break: break-word;
}

.fpt-cond-badge i {
    margin-right: 4px;
}

.fpt-has-condition {
    border-left: 3px dashed var(--at-color-status-warning) !important;
}

.fpt-copy-badge {
    font-size: 10px;
    background: var(--at-color-muted);
    color: var(--at-color-status-success-ink);
    border: 1px solid var(--at-color-border);
    border-radius: 3px;
    padding: 3px 8px;
    margin-bottom: 4px;
}

.fpt-copy-badge i {
    margin-right: 4px;
}

.fpt-has-copy-rule {
    border-left: 3px solid var(--at-color-status-success) !important;
}

/* ── Edit Link Icon ── */
.fpt-edit-link {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background: var(--at-color-muted);
    border: 1px solid var(--at-color-status-warning);
    color: var(--at-color-status-warning-ink);
    font-size: 11px;
    z-index: 10;
    text-decoration: none;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--at-color-foreground, #000) 15%, transparent);
}

.fpt-edit-link:hover {
    background: var(--at-color-status-warning);
    color: var(--at-color-card-foreground);
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--at-color-foreground, #000) 20%, transparent);
}

/* ── Summary Panel ── */
#fpt-summary-panel {
    background: var(--at-color-muted);
    border: 1px solid var(--at-color-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 10px 15px;
    margin-top: -6px;
    margin-bottom: 15px;
}

.fpt-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: var(--at-color-card-foreground);
}

.fpt-summary-table th {
    background: var(--at-color-muted);
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--at-color-border);
}

.fpt-summary-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--at-color-border);
}

.fpt-summary-total td {
    border-top: 2px solid var(--at-color-accent, #03a9f4);
    background: var(--at-color-muted);
}

/* ── Device Width Simulator ── */
.fpt-device-tablet {
    max-width: 768px !important;
    margin: 0 auto;
    transition: max-width 0.3s ease;
    border: 2px dashed var(--at-color-accent, #03a9f4);
    border-radius: 4px;
}

.fpt-device-mobile {
    max-width: 375px !important;
    margin: 0 auto;
    transition: max-width 0.3s ease;
    border: 2px dashed var(--at-color-status-warning);
    border-radius: 4px;
}

/* ── Inline message ── */
.fpt-inline-msg {
    font-size: 10px;
    color: var(--at-color-card-foreground);
    margin-left: 6px;
    font-style: italic;
}

/* ── Section CL: Disabled State ── */
.fb-section-disabled {
    position: relative;
    opacity: 0.5;
    pointer-events: none;
}

.fb-section-disabled::after {
    content: 'DISABLED';
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 9px;
    font-weight: 700;
    color: var(--at-color-status-warning-ink);
    background: var(--at-color-status-warning);
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

/* ── Section CL: Preview Toolbar Badge (distinct orange for section-level CL) ── */
.fpt-section-cond-badge {
    background: var(--at-color-status-warning);
    color: var(--at-color-card-foreground);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 4px;
}

/* ── Section CL: Inherited Banner separator ── */
.fb-section-content.fb-section-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   Preview Toolbar — 3-Mode Toggle (Analyser / AI Auditor / AI Assistance)
   ═══════════════════════════════════════════════════════════════ */

/* Segmented toggle wrapper */
.fpt-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--at-color-border);
    border-radius: 5px;
    overflow: hidden;
    background: var(--at-color-muted);
    flex-shrink: 0;
}

/* Individual mode pill button */
.fpt-mode-pill {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
    border: none;
    border-right: 1px solid var(--at-color-border);
    background: transparent;
    color: var(--at-color-card-foreground);
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    outline: none;
}

.fpt-mode-pill:last-child {
    border-right: none;
}

.fpt-mode-pill:hover {
    background: var(--at-color-muted);
    color: var(--at-color-card-foreground);
}

/* Active mode pill */
.fpt-mode-pill.fpt-mode-active {
    background: var(--at-color-accent, #03a9f4);
    color: var(--at-color-card-foreground);
}

.fpt-mode-pill.fpt-mode-active:hover {
    background: var(--at-color-accent, #0295d8);
}

/* Mode containers — hidden by default */
.fpt-mode-panel {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Visible mode panel */
.fpt-mode-panel.fpt-mode-visible {
    display: flex;
}

/* Coming soon placeholder for AI Assistance mode */
.fpt-mode-placeholder {
    font-size: 12px;
    color: var(--at-color-card-foreground);
    font-style: italic;
    padding: 2px 10px;
}

/* AI Auditor mode status indicator */
.fpt-auditor-status {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.fpt-auditor-status-on {
    background: var(--at-color-muted);
    color: var(--at-color-status-success-ink);
    border: 1px solid var(--at-color-border);
}

.fpt-auditor-status-off {
    background: var(--at-color-muted);
    color: var(--at-color-destructive-ink);
    border: 1px solid var(--at-color-destructive);
}

/* Playbook dropdown in AI Auditor toolbar mode */
.fpt-playbook-select {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    background: var(--at-color-card);
    color: var(--at-color-card-foreground);
    cursor: pointer;
    min-width: 160px;
    max-width: 260px;
    outline: none;
    transition: border-color 0.15s ease;
}

.fpt-playbook-select:hover {
    border-color: var(--at-color-border);
}

.fpt-playbook-select:focus {
    border-color: var(--at-color-accent, #03a9f4);
}

.fpt-filter-select {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 10px;
    font-weight: 500;
    padding: 3px 6px;
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    background: var(--at-color-card);
    color: var(--at-color-card-foreground);
    cursor: pointer;
    min-width: 100px;
    max-width: 180px;
    outline: none;
    transition: border-color 0.15s ease;
}

.fpt-filter-select:hover {
    border-color: var(--at-color-border);
}

.fpt-filter-select:focus {
    border-color: var(--at-color-accent, #03a9f4);
}

/* ── AI Auditor: Results Panel ── */

.fpt-audit-results {
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-top: none;
    padding: 16px 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
}

.fpt-audit-result-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--at-color-border);
}

.fpt-audit-score {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.fpt-audit-score small {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.6;
}

.fpt-audit-band {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.fpt-band-pass {
    color: var(--at-color-status-success-ink);
}

.fpt-audit-band.fpt-band-pass {
    background: var(--at-color-muted);
    border: 1px solid var(--at-color-border);
}

.fpt-band-review {
    color: var(--at-color-status-warning-ink);
}

.fpt-audit-band.fpt-band-review {
    background: var(--at-color-muted);
    border: 1px solid var(--at-color-status-warning);
}

.fpt-band-fail {
    color: var(--at-color-destructive-ink);
}

.fpt-audit-band.fpt-band-fail {
    background: var(--at-color-muted);
    border: 1px solid var(--at-color-destructive);
}

.fpt-audit-thresholds {
    font-size: 11px;
    color: var(--at-color-card-foreground);
    margin-left: auto;
}

.fpt-audit-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--at-color-card-foreground);
    font-size: 14px;
    padding: 4px 8px;
    transition: color 0.15s;
}

.fpt-audit-close:hover {
    color: var(--at-color-card-foreground);
}

.fpt-audit-analysis {
    color: var(--at-color-card-foreground);
    font-size: 12px;
    line-height: 1.7;
}

.fpt-audit-analysis h2,
.fpt-audit-analysis h3,
.fpt-audit-analysis h4 {
    margin: 10px 0 4px;
    color: var(--at-color-card-foreground);
}

.fpt-audit-analysis li {
    margin-left: 16px;
    list-style-type: disc;
}

.fpt-audit-error {
    color: var(--at-color-destructive-ink);
    padding: 10px;
    background: var(--at-color-muted);
    border-radius: 4px;
    font-size: 12px;
}

/* ── Submit Test: Button States ── */
.fpt-btn.fpt-submit-test {
    background: var(--at-color-accent, #1565c0);
    color: var(--at-color-card-foreground);
    border-color: var(--at-color-accent, #0d47a1);
    font-weight: 600;
}

.fpt-btn.fpt-submit-test:hover {
    background: var(--at-color-accent, #0d47a1);
    border-color: var(--at-color-accent, #0d47a1);
    color: var(--at-color-card-foreground);
}

.fpt-btn.fpt-submit-test i {
    color: var(--at-color-card-foreground);
}

.fpt-btn.fpt-delete-test {
    background: var(--at-color-destructive);
    color: var(--at-color-card-foreground);
    border-color: var(--at-color-destructive);
    font-weight: 600;
}

.fpt-btn.fpt-delete-test:hover {
    background: var(--at-color-destructive);
    border-color: var(--at-color-destructive);
    color: var(--at-color-card-foreground);
}

.fpt-btn.fpt-delete-test i {
    color: var(--at-color-card-foreground);
}

/* ── Submit Test: Score Ring ── */
.fpt-score-ring-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.fpt-score-ring-svg {
    width: 80px;
    height: 80px;
    transform: rotate(-90deg);
}

.fpt-score-ring-bg {
    fill: none;
    stroke: var(--at-color-card-foreground);
    stroke-width: 6;
}

.fpt-score-ring-fg {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s ease-out, stroke 0.3s;
}

.fpt-score-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1;
}

.fpt-score-ring-num {
    font-size: 22px;
    font-weight: 700;
    display: block;
}

.fpt-score-ring-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    display: block;
    margin-top: 2px;
}

/* ── Submit Test: Header Layout ── */
.fpt-st-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--at-color-border);
    margin-bottom: 12px;
}

.fpt-st-meta {
    flex: 1;
}

.fpt-st-playbook {
    font-size: 11px;
    color: var(--at-color-card-foreground);
    margin-top: 4px;
}

/* ── Submit Test: Pillar Breakdown ── */
.fpt-pillar-breakdown {
    padding: 10px 0;
    border-bottom: 1px solid var(--at-color-border);
    margin-bottom: 12px;
}

.fpt-pillar-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.fpt-status-pass {
    background: var(--at-color-muted);
    color: var(--at-color-status-success-ink);
}

.fpt-status-improve {
    background: var(--at-color-muted);
    color: var(--at-color-status-warning-ink);
}

.fpt-status-critical {
    background: var(--at-color-card);
    color: var(--at-color-destructive-ink);
}

.fpt-pillar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.fpt-pillar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    cursor: help;
}

.fpt-pillar-label {
    min-width: 90px;
    color: var(--at-color-card-foreground);
    font-weight: 500;
}

.fpt-pillar-label i {
    width: 14px;
    text-align: center;
    color: var(--at-color-card-foreground);
}

.fpt-pillar-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--at-color-muted);
    border-radius: 3px;
    overflow: hidden;
}

.fpt-pillar-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.fpt-pillar-grade {
    min-width: 28px;
    text-align: right;
    font-weight: 600;
    font-size: 11px;
    color: var(--at-color-card-foreground);
}

.fpt-critical-flags {
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--at-color-muted);
    border-left: 3px solid var(--at-color-status-warning);
    border-radius: 3px;
    font-size: 11px;
}

.fpt-critical-flags strong {
    color: var(--at-color-status-warning-ink);
}

.fpt-collapse-header:hover {
    opacity: 0.85;
}

.fpt-collapse-header.fpt-open .fpt-collapse-icon {
    transform: rotate(90deg);
}

.fpt-flag-item {
    padding: 2px 0;
    color: var(--at-color-card-foreground);
}

.fpt-improvements {
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--at-color-card);
    border-left: 3px solid var(--at-color-accent, #1976d2);
    border-radius: 3px;
    font-size: 11px;
}

.fpt-improvements strong {
    color: var(--at-color-primary);
}

/* Status + confidence row */
.fpt-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.fpt-confidence {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.fpt-conf-high {
    background: var(--at-color-muted);
    color: var(--at-color-status-success-ink);
}

.fpt-conf-med {
    background: var(--at-color-muted);
    color: var(--at-color-status-warning-ink);
}

.fpt-conf-low {
    background: var(--at-color-card);
    color: var(--at-color-destructive-ink);
}

/* Severity badges in flags */
.fpt-sev-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    min-width: 65px;
    text-align: center;
}

.fpt-flag-item {
    padding: 3px 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.fpt-sev-critical .fpt-sev-badge {
    color: var(--at-color-destructive-ink);
}

.fpt-sev-high .fpt-sev-badge {
    color: var(--at-color-status-warning-ink);
}

.fpt-sev-medium .fpt-sev-badge {
    color: var(--at-color-status-warning-ink);
}

.fpt-sev-low .fpt-sev-badge {
    color: var(--at-color-card-foreground);
}

/* Field grades */
.fpt-field-grades {
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--at-color-card);
    border-left: 3px solid var(--at-color-border);
    border-radius: 3px;
    font-size: 11px;
}

.fpt-field-grades strong {
    color: var(--at-color-card-foreground);
}

.fpt-fg-summary {
    display: flex;
    gap: 6px;
    margin: 6px 0;
}

.fpt-fg-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.fpt-fg-chip.fpt-fg-pass {
    background: var(--at-color-muted);
    color: var(--at-color-status-success-ink);
}

.fpt-fg-chip.fpt-fg-warn {
    background: var(--at-color-muted);
    color: var(--at-color-status-warning-ink);
}

.fpt-fg-chip.fpt-fg-fail {
    background: var(--at-color-card);
    color: var(--at-color-destructive-ink);
}

.fpt-fg-list {
    max-height: 200px;
    overflow-y: auto;
}

.fpt-fg-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 2px 0;
    border-bottom: 1px solid var(--at-color-border);
}

.fpt-fg-verdict {
    min-width: 16px;
    font-weight: 700;
}

.fpt-fg-row.fpt-fg-pass .fpt-fg-verdict {
    color: var(--at-color-status-success-ink);
}

.fpt-fg-row.fpt-fg-warn .fpt-fg-verdict {
    color: var(--at-color-status-warning-ink);
}

.fpt-fg-row.fpt-fg-fail .fpt-fg-verdict {
    color: var(--at-color-destructive-ink);
}

.fpt-fg-field {
    font-weight: 500;
    min-width: 120px;
    color: var(--at-color-card-foreground);
}

.fpt-fg-reason {
    flex: 1;
    color: var(--at-color-card-foreground);
}

.fpt-improve-item {
    padding: 2px 0;
    color: var(--at-color-card-foreground);
}

/* ── Submit Test: Action Chips ── */
.fpt-action-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fpt-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid transparent;
}

.fpt-action-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--at-color-foreground, #000) 12%, transparent);
}

.fpt-chip-pdf {
    background: var(--at-color-muted);
    color: var(--at-color-primary);
    border-color: var(--at-color-accent, #90caf9);
}

.fpt-chip-pdf:hover {
    background: var(--at-color-muted);
    color: var(--at-color-primary);
}

.fpt-chip-ticket {
    background: var(--at-color-muted);
    color: var(--at-color-primary);
    border-color: var(--at-color-secondary, #ce93d8);
}

.fpt-chip-ticket:hover {
    background: var(--at-color-muted);
    color: var(--at-color-primary);
}

.fpt-chip-status {
    background: var(--at-color-muted);
    color: var(--at-color-status-success-ink);
    border-color: var(--at-color-border);
}

.fpt-chip-status:hover {
    background: var(--at-color-muted);
    color: var(--at-color-status-success-ink);
}

.fpt-chip-error {
    background: var(--at-color-muted);
    color: var(--at-color-destructive-ink);
    border-color: var(--at-color-destructive);
}

.fpt-chip-none {
    background: var(--at-color-card);
    color: var(--at-color-card-foreground);
    border-color: var(--at-color-border);
    cursor: default;
    font-style: italic;
}

.fpt-chip-blocked {
    background: var(--at-color-destructive);
    color: var(--at-color-card-foreground);
    border-color: var(--at-color-destructive);
    font-weight: 700;
    letter-spacing: 0.3px;
}

.fpt-chip-blocked:hover {
    background: var(--at-color-destructive);
    color: var(--at-color-card-foreground);
}

/* ── Submit Test: Blocked Banner ── */
.fpt-blocked-banner {
    background: linear-gradient(135deg, var(--at-color-status-danger, #ffebee) 0%, var(--at-color-status-danger, #fce4ec) 100%);
    border: 1px solid var(--at-color-destructive);
    border-left: 4px solid var(--at-color-destructive);
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--at-color-destructive-ink);
    line-height: 1.5;
}

.fpt-blocked-banner i {
    color: var(--at-color-destructive-ink);
    margin-right: 4px;
}

.fpt-blocked-banner strong {
    font-weight: 700;
}

/* ── Submit Test: Unified Status Row ── */
.fpt-unified-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 0;
    margin-bottom: 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.fpt-unified-section {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.fpt-row-divider {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: var(--at-color-muted);
    margin: 0 10px;
    flex-shrink: 0;
}

.fpt-unified-chips .fpt-action-chip {
    margin-bottom: 0;
}

.fpt-unified-actions {
    gap: 4px;
}

.fpt-timeline-step {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
}

.fpt-timeline-node {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--at-color-card);
    color: var(--at-color-card-foreground);
    border: 1px solid var(--at-color-border);
}

.fpt-timeline-node.fpt-tl-done {
    background: var(--at-color-muted);
    color: var(--at-color-status-success-ink);
    border-color: var(--at-color-border);
}

.fpt-timeline-node.fpt-tl-done i {
    color: var(--at-color-status-success-ink);
}

.fpt-timeline-node.fpt-tl-active {
    background: var(--at-color-muted);
    color: var(--at-color-primary);
    border-color: var(--at-color-accent, #90caf9);
    animation: fpt-pulse 1.5s infinite;
}

.fpt-timeline-arrow {
    font-size: 10px;
    color: var(--at-color-card-foreground);
    margin: 0 4px;
}

@keyframes fpt-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--at-color-accent, #1565c0) 30%, transparent);
    }

    50% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--at-color-accent, #1565c0) 0%, transparent);
    }
}

/* ── Submit Test: Analysis (Collapsible) ── */
.fpt-st-analysis-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.fpt-st-analysis-toggle {
    font-size: 11px;
    color: var(--at-color-primary);
    cursor: pointer;
    font-weight: 500;
    user-select: none;
    padding: 4px 0;
}

.fpt-st-analysis-toggle:hover {
    text-decoration: underline;
}

.fpt-st-analysis-body {
    display: none;
    padding: 10px 14px;
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--at-color-card-foreground);
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 8px;
}

.fpt-st-analysis-body h2,
.fpt-st-analysis-body h3,
.fpt-st-analysis-body h4 {
    margin: 10px 0 4px;
    color: var(--at-color-card-foreground);
}

.fpt-st-analysis-body li {
    margin-left: 16px;
    list-style-type: disc;
}

/* ── Submit Test: Toast Notifications ── */
.fpt-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.fpt-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--at-color-card-foreground);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--at-color-foreground, #000) 18%, transparent);
    pointer-events: auto;
    animation: fpt-toast-in 0.35s ease-out;
    max-width: 360px;
}

.fpt-toast-success {
    background: var(--at-color-status-success);
}

.fpt-toast-info {
    background: var(--at-color-accent, #1565c0);
}

.fpt-toast-warn {
    background: var(--at-color-status-warning);
}

.fpt-toast-error {
    background: var(--at-color-destructive);
}

.fpt-toast i {
    font-size: 14px;
}

@keyframes fpt-toast-in {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fpt-toast-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* ── Submit Test: Delete Confirmation Overlay ── */
.fpt-delete-confirm {
    background: var(--at-color-card);
    border: 1px solid var(--at-color-destructive);
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.fpt-delete-confirm-text {
    flex: 1;
    font-size: 12px;
    color: var(--at-color-destructive-ink);
}

.fpt-delete-confirm-text strong {
    font-weight: 700;
}

.fpt-delete-yes {
    background: var(--at-color-destructive);
    color: var(--at-color-card-foreground);
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.fpt-delete-yes:hover {
    background: var(--at-color-destructive);
}

.fpt-delete-cancel {
    background: none;
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 11px;
    cursor: pointer;
    color: var(--at-color-card-foreground);
    transition: all 0.15s;
}

.fpt-delete-cancel:hover {
    border-color: var(--at-color-border);
    color: var(--at-color-card-foreground);
}

/* ── Submit Test: PDF Inline Modal ── */
.fpt-pdf-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99998;
    background: var(--at-color-card);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fpt-fade-in 0.25s;
}

.fpt-pdf-modal-inner {
    width: 80vw;
    height: 85vh;
    background: var(--at-color-card);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 48px color-mix(in srgb, var(--at-color-foreground, #000) 30%, transparent);
    display: flex;
    flex-direction: column;
}

.fpt-pdf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--at-color-card);
    border-bottom: 1px solid var(--at-color-border);
    font-size: 13px;
    font-weight: 600;
}

.fpt-pdf-modal-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--at-color-card-foreground);
    transition: color 0.15s;
}

.fpt-pdf-modal-close:hover {
    color: var(--at-color-destructive-ink);
}

.fpt-pdf-modal-body {
    flex: 1;
}

.fpt-pdf-modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@keyframes fpt-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── AI Auditor: Logger Panel ── */

.fpt-ai-logger-panel {
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-top: none;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    max-height: 260px;
    overflow-y: auto;
}

.fpt-logger-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--at-color-muted, #2a2a3e);
    color: var(--at-color-card-foreground);
    border-bottom: 1px solid var(--at-color-border);
}

.fpt-logger-clear {
    background: none;
    border: 1px solid var(--at-color-border);
    color: var(--at-color-card-foreground);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.fpt-logger-clear:hover {
    border-color: var(--at-color-border);
    color: var(--at-color-card-foreground);
}

.fpt-logger-entries {
    padding: 6px 12px;
    color: var(--at-color-card-foreground);
}

.fpt-logger-entry {
    display: flex;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid var(--at-color-border);
}

.fpt-logger-time {
    color: var(--at-color-card-foreground);
    flex-shrink: 0;
    min-width: 70px;
}

.fpt-logger-type {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 2px;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.fpt-logger-type-smart-fill {
    background: var(--at-color-muted, #1e3a5f);
    color: var(--at-color-primary);
}

.fpt-logger-type-test-audit {
    background: var(--at-color-destructive);
    color: var(--at-color-status-warning-ink);
}

.fpt-logger-msg {
    color: var(--at-color-card-foreground);
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════
   Phase 3: Advanced UX — Sparkline, Compare, Flagging, Export
   ═══════════════════════════════════════════════════════════════ */

/* ── Sparkline (Score History) ── */
.fpt-sparkline-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
}

.fpt-sparkline-label {
    font-size: 10px;
    color: var(--at-color-card-foreground);
    white-space: nowrap;
    font-weight: 500;
}

.fpt-sparkline-svg {
    flex: 1;
    height: 30px;
}

.fpt-sparkline-line {
    fill: none;
    stroke: var(--at-color-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fpt-sparkline-dot {
    fill: var(--at-color-primary);
}

.fpt-sparkline-scores {
    display: flex;
    gap: 4px;
    font-size: 9px;
    color: var(--at-color-card-foreground);
}

.fpt-sparkline-scores span {
    padding: 1px 4px;
    border-radius: 2px;
    background: var(--at-color-muted);
}

.fpt-sparkline-scores span:last-child {
    background: var(--at-color-muted);
    color: var(--at-color-primary);
    font-weight: 600;
}

/* ── Side-by-Side Compare ── */
.fpt-compare-wrap {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.fpt-compare-col {
    flex: 1;
    border: 1px solid var(--at-color-border);
    border-radius: 6px;
    padding: 12px;
    background: var(--at-color-card);
    text-align: center;
}

.fpt-compare-col-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--at-color-card-foreground);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--at-color-border);
}

.fpt-compare-score {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.fpt-compare-diff {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 4px;
}

.fpt-compare-diff-pos {
    background: var(--at-color-muted);
    color: var(--at-color-status-success-ink);
}

.fpt-compare-diff-neg {
    background: var(--at-color-muted);
    color: var(--at-color-destructive-ink);
}

.fpt-compare-diff-eq {
    background: var(--at-color-card);
    color: var(--at-color-card-foreground);
}

/* ── Field-Level Flagging ── */
.fpt-flagged-field {
    outline: 2px solid var(--at-color-destructive) !important;
    outline-offset: 2px;
    border-radius: 4px;
    position: relative;
}

.fpt-warned-field {
    outline: 2px solid var(--at-color-status-warning) !important;
    outline-offset: 2px;
    border-radius: 4px;
    position: relative;
}

.fpt-passed-field {
    outline: 2px solid var(--at-color-status-success) !important;
    outline-offset: 2px;
    border-radius: 4px;
    position: relative;
}

.fpt-flag-tooltip {
    position: absolute;
    top: -28px;
    right: 4px;
    background: var(--at-color-destructive);
    color: var(--at-color-card-foreground);
    font-size: 10px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--at-color-foreground, #000) 15%, transparent);
    pointer-events: auto;
    cursor: default;
}

.fpt-flag-tooltip.fpt-flag-pass {
    background: var(--at-color-status-success);
}

.fpt-flag-tooltip.fpt-flag-warn {
    background: var(--at-color-status-warning);
}

.fpt-flag-tooltip.fpt-flag-fail {
    background: var(--at-color-destructive);
}

.fpt-flag-tooltip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    right: 12px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--at-color-destructive);
}

.fpt-flag-tooltip.fpt-flag-pass::after {
    border-top-color: var(--at-color-status-success);
}

.fpt-flag-tooltip.fpt-flag-warn::after {
    border-top-color: var(--at-color-status-warning);
}

.fpt-flag-tooltip.fpt-flag-fail::after {
    border-top-color: var(--at-color-destructive);
}

/* ── Actions Bar (Re-Test, Compare, Export) ── */
.fpt-st-actions-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.fpt-st-action-btn {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--at-color-border);
    background: var(--at-color-card);
    color: var(--at-color-card-foreground);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.fpt-st-action-btn:hover {
    background: var(--at-color-muted);
    border-color: var(--at-color-border);
    color: var(--at-color-card-foreground);
}

.fpt-st-action-btn i {
    margin-right: 3px;
}

.fpt-st-action-btn.fpt-action-active {
    background: var(--at-color-accent, #1565c0);
    color: var(--at-color-card-foreground);
    border-color: var(--at-color-accent, #0d47a1);
}

/* Icon-only action buttons */
.fpt-st-action-btn.fpt-icon-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.fpt-st-action-btn.fpt-icon-btn i {
    margin-right: 0;
    font-size: 12px;
}

/* ── Export Modal ── */
.fpt-export-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99997;
    background: var(--at-color-card);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fpt-fade-in 0.2s;
}

.fpt-export-inner {
    background: var(--at-color-card);
    border-radius: 8px;
    width: 500px;
    max-width: 90vw;
    padding: 20px;
    box-shadow: 0 12px 36px color-mix(in srgb, var(--at-color-foreground, #000) 20%, transparent);
}

.fpt-export-inner h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
}

.fpt-export-content {
    font-size: 12px;
    line-height: 1.7;
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px;
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    white-space: pre-wrap;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.fpt-export-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: flex-end;
}
/* ── Customer Profile Form: wider layout ── */
/* The form renders inside .panel_s > .panel-body > .tab-content, and
   project_form_embed.php adds another .panel_s inside. Flatten the
   double-panel to reclaim space without negative-margin overlap. */
.fb-customer-form-wide {
    margin: -15px;
}
.fb-customer-form-wide .panel_s.fb-form-container {
    border: none;
    box-shadow: none;
    margin: 0;
    max-width: none;
}
.fb-customer-form-wide .panel_s.fb-form-container > .panel-body {
    padding: 10px 5px;
}

/* Hide reCAPTCHA v3 floating badge — inline attribution text shown per Google TOS */
.grecaptcha-badge {
    visibility: hidden !important;
}