/* Formidable-inspired frontend styling (theme-friendly via variables). */
.jf-form {
    margin: 16px 0;

    --jf-font-size: 15px;
    --jf-text-color: #1D2939;
    --jf-label-color: #344054;
    --jf-muted-color: #667085;
    --jf-border-color: #D0D5DD;
    --jf-border-color-active: #4199FD;
    --jf-border-color-soft: #EAECF0;
    --jf-required-color: #F04438;
    --jf-bg: #ffffff;
    --jf-bg-disabled: #F9FAFB;
    --jf-radius: 8px;

    --jf-field-pad: 8px 12px;
    --jf-field-height: 36px;
    --jf-grid-row-gap: 20px;
    --jf-grid-col-gap: 28px;

    --jf-submit-bg: #4199FD;
    --jf-submit-bg-hover: #3680D3;
    --jf-submit-text: #ffffff;
    --jf-submit-radius: 8px;
}

.jf-form-inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: var(--jf-grid-row-gap);
    column-gap: var(--jf-grid-col-gap);
    font-size: var(--jf-font-size);
    color: var(--jf-text-color);
}

.jf-page {
    display: contents;
}

.jf-field { display: grid; gap: 1px; }

.jf-field[data-span="12"],
.jf-section[data-span="12"],
.jf-divider[data-span="12"] { grid-column: span 12; }
.jf-field[data-span="9"],
.jf-section[data-span="9"],
.jf-divider[data-span="9"] { grid-column: span 9; }
.jf-field[data-span="8"],
.jf-section[data-span="8"],
.jf-divider[data-span="8"] { grid-column: span 8; }
.jf-field[data-span="6"],
.jf-section[data-span="6"],
.jf-divider[data-span="6"] { grid-column: span 6; }
.jf-field[data-span="4"],
.jf-section[data-span="4"],
.jf-divider[data-span="4"] { grid-column: span 4; }
.jf-field[data-span="3"],
.jf-section[data-span="3"],
.jf-divider[data-span="3"] { grid-column: span 3; }



.jf-section {
    display: grid;
    gap: 6px;
    padding: 28px 0 0;
    margin: 30px 0 14px;
    border-top: 1px solid var(--jf-border-color-soft);
}

.jf-section-title {
    font-weight: 700;
    font-size: 18px;
    color: var(--jf-label-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.jf-section-desc {
    color: var(--jf-muted-color);
    font-size: 12px;
}

.jf-section-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-block;
    line-height: 1;
    font-weight: 700;
    color: var(--jf-label-color);
}

.jf-section-toggle[aria-expanded="true"]::before { content: '▾'; }
.jf-section-toggle[aria-expanded="false"]::before { content: '▸'; }

.jf-divider hr { border: 0; border-top: 1px solid var(--jf-border-color-soft); }

.jf-label {
    font-weight: 600;
    color: var(--jf-label-color);
}

.jf-input {
    width: 100%;
    max-width: 100%;
    padding: var(--jf-field-pad);
    border: 1px solid var(--jf-border-color);
    border-radius: var(--jf-radius);
    background: var(--jf-bg);
    color: var(--jf-text-color);
    height: var(--jf-field-height);
    line-height: normal;
}

.jf-input:focus {
    outline: none;
    border-color: var(--jf-border-color-active);
    box-shadow: 0 0 0 1px var(--jf-border-color-active);
}

textarea.jf-input {
    height: auto;
    min-height: 120px;
}

.jf-input[disabled],
.jf-input[aria-disabled="true"] {
    background: var(--jf-bg-disabled);
    color: var(--jf-muted-color);
}

.jf-input.jf-input-error {
    border-color: var(--jf-required-color);
    box-shadow: none;
}

.jf-actions { margin-top: 10px; }

.jf-actions { grid-column: span 12; }

.jf-prev, .jf-next, .jf-submit {
    padding: 8px 16px;
    margin-right: 10px;
    border-radius: var(--jf-submit-radius);
    border: 1px solid var(--jf-border-color);
    background: var(--jf-bg);
    color: var(--jf-text-color);
    cursor: pointer;
}

.jf-html { grid-column: span 12; }

.jf-submit {
    border-color: var(--jf-submit-bg);
    background: var(--jf-submit-bg);
    color: var(--jf-submit-text);
}

.jf-submit:hover {
    background: var(--jf-submit-bg-hover);
    border-color: var(--jf-submit-bg-hover);
}

.jf-required { color: var(--jf-required-color); font-weight: 700; }

.jf-help {
    font-size: 12px;
    color: var(--jf-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 14px;
    line-height: 1.2;
    /* Keep a consistent gap under the field across themes (avoid negative-margin hacks). */
    margin-top: clamp(2px, 0.35em, 8px);
}

.jf-help.is-empty {
    visibility: hidden;
}

.jf-success {
    padding: 12px;
    border: 1px solid #72aee6;
    background: #f0f6fc;
}

.jf-errors {
    padding: 12px;
    border: 1px solid #d63638;
    background: #fcf0f1;
}

.jf-field-error { color: var(--jf-required-color); }

.jf-radio-group,
.jf-checkboxes {
    display: grid;
    gap: 4px;
}

.jf-radio,
.jf-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
}

.jf-radio input,
.jf-checkbox input {
    margin: 0;
}

.jf-file {
    display: grid;
    gap: 8px;
}

/* ---- Views (aggregated charts) ---- */
.jf-view {
    margin: 16px 0;
}

.jf-view-title {
    margin: 0 0 10px 0;
}

.jf-view-block {
    margin: 16px 0;
}

.jf-view-field {
    margin: 0 0 8px 0;
}

.jf-view-chart {
    position: relative;
    height: 320px;
    min-height: 320px;
    overflow: hidden;
}

.jf-view-chart--table {
    height: auto;
    min-height: 0;
}

.jf-view-chart canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.jf-view-empty {
    color: #667085;
    font-size: 14px;
}

.jf-view-table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
}

.jf-view-table th,
.jf-view-table td {
    border-bottom: 1px solid #EAECF0;
    padding: 6px 8px;
    text-align: left;
}

.jf-file-drop {
    padding: var(--jf-field-pad);
    border: 1px dashed var(--jf-border-color);
    border-radius: var(--jf-radius);
    background: var(--jf-bg-disabled);
    color: var(--jf-muted-color);
    cursor: pointer;
    user-select: none;
}

.jf-file-drop.is-dragover {
    border-color: var(--jf-border-color-active);
    box-shadow: 0 0 0 1px var(--jf-border-color-active);
}

.jf-file-name {
    font-size: 12px;
    color: var(--jf-muted-color);
    min-height: 16px;
}

.jf-entries-list-wrap table.display tbody td.jf-detail-action-cell {
    position: relative;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.jf-entries-list-wrap table.display tbody td.jf-detail-action-cell .row-actions {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--jf-muted-color);
    visibility: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 160ms ease;
}

.jf-entries-list-wrap table.display tbody td.jf-detail-action-cell .row-actions a {
    text-decoration: none;
}

.jf-entries-list-wrap table.display tbody tr:hover td.jf-detail-action-cell,
.jf-entries-list-wrap table.display tbody tr:focus-within td.jf-detail-action-cell {
    background: rgba(65, 153, 253, 0.08);
    box-shadow: inset 3px 0 0 0 var(--jf-submit-bg);
}

.jf-entries-list-wrap table.display tbody tr:hover td.jf-detail-action-cell .row-actions,
.jf-entries-list-wrap table.display tbody tr:focus-within td.jf-detail-action-cell .row-actions,
.jf-entries-list-wrap table.display tbody td.jf-detail-action-cell:focus-within .row-actions {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 720px) {
    .jf-form {
        --jf-grid-row-gap: 16px;
        --jf-grid-col-gap: 16px;
    }

    .jf-form-inner {
        grid-template-columns: 1fr;
    }

    .jf-radio,
    .jf-checkbox {
        align-items: flex-start;
    }

    .jf-radio input,
    .jf-checkbox input {
        margin-top: 2px;
    }

    .jf-field,
    .jf-section,
    .jf-divider,
    .jf-actions,
    .jf-html {
        grid-column: 1 / -1 !important;
    }

}