/*
 * JO Form front-end base styles (2.2.2).
 * Self-contained replacement for the Bootstrap classes the form used to
 * rely on. Everything is scoped under .jof-form so template/Bootstrap
 * rules for .row, .btn, .form-control, etc. no longer affect the form,
 * and these rules cannot leak out. Tweak via the --jof-* variables.
 */
.jof-form {
    --jof-gap: 1.5rem;
    --jof-text: #212529;
    --jof-muted: #6c757d;
    --jof-border: #ced4da;
    --jof-radius: .375rem;
    --jof-bg: #fff;
    --jof-focus: #86b7fe;
    --jof-focus-ring: rgba(13, 110, 253, .25);
    --jof-primary: #0d6efd;
    --jof-primary-hover: #0b5ed7;
    --jof-primary-text: #fff;
    --jof-secondary: #6c757d;
    --jof-secondary-hover: #5c636a;
    --jof-secondary-text: #fff;
    --jof-danger: #dc3545;
    --jof-success: #198754;
    color: var(--jof-text);
}
.jof-form *,
.jof-form *::before,
.jof-form *::after {
    box-sizing: border-box;
}

/* ---- Grid: full / half / third, stacked below 768px ---- */
.jof-form .jof-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--jof-gap) / -2);
    margin-right: calc(var(--jof-gap) / -2);
}
.jof-form .jof-row > * {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: calc(var(--jof-gap) / 2);
    padding-right: calc(var(--jof-gap) / 2);
}
@media (min-width: 768px) {
    .jof-form .jof-row > .jof-col-half {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .jof-form .jof-row > .jof-col-third {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    /* 2.3.1 builder rows: N equal columns (1-6), stacked below 768px. */
    .jof-form .jof-row.jof-cols-1 > .jof-col-eq {
        flex: 0 0 100.000000%;
        max-width: 100.000000%;
    }
    .jof-form .jof-row.jof-cols-2 > .jof-col-eq {
        flex: 0 0 50.000000%;
        max-width: 50.000000%;
    }
    .jof-form .jof-row.jof-cols-3 > .jof-col-eq {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .jof-form .jof-row.jof-cols-4 > .jof-col-eq {
        flex: 0 0 25.000000%;
        max-width: 25.000000%;
    }
    .jof-form .jof-row.jof-cols-5 > .jof-col-eq {
        flex: 0 0 20.000000%;
        max-width: 20.000000%;
    }
    .jof-form .jof-row.jof-cols-6 > .jof-col-eq {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    /* 3.1.3: explicit column width (1-12 of 12), set with the column cog. */
    .jof-form .jof-row > .jof-col-w-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .jof-form .jof-row > .jof-col-w-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .jof-form .jof-row > .jof-col-w-3 {
        flex: 0 0 25.000000%;
        max-width: 25.000000%;
    }
    .jof-form .jof-row > .jof-col-w-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .jof-form .jof-row > .jof-col-w-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .jof-form .jof-row > .jof-col-w-6 {
        flex: 0 0 50.000000%;
        max-width: 50.000000%;
    }
    .jof-form .jof-row > .jof-col-w-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .jof-form .jof-row > .jof-col-w-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .jof-form .jof-row > .jof-col-w-9 {
        flex: 0 0 75.000000%;
        max-width: 75.000000%;
    }
    .jof-form .jof-row > .jof-col-w-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .jof-form .jof-row > .jof-col-w-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .jof-form .jof-row > .jof-col-w-12 {
        flex: 0 0 100.000000%;
        max-width: 100.000000%;
    }
    /* 3.1.3: inherited columns next to sized ones share what is left. */
    .jof-form .jof-row.jof-has-w > .jof-col-eq {
        flex: 1 1 0;
        max-width: none;
    }
}

/* ---- Form controls ---- */
.jof-form .jof-form-group {
    margin: 0;
}
.jof-form .jof-label {
    display: inline-block;
    margin-bottom: .5rem;
}
.jof-form .jof-input,
.jof-form .jof-select {
    display: block;
    width: 100%;
    margin: 0;
    padding: .375rem .75rem;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--jof-text);
    background-color: var(--jof-bg);
    background-clip: padding-box;
    border: 1px solid var(--jof-border);
    border-radius: var(--jof-radius);
    box-shadow: none;
    height: auto;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.jof-form textarea.jof-input {
    min-height: calc(1.5em + .75rem + 2px);
    resize: vertical;
}
.jof-form .jof-select {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}
.jof-form .jof-select[multiple] {
    padding-right: .75rem;
    background-image: none;
}
.jof-form .jof-input[type="file"] {
    padding: .375rem .75rem;
}
.jof-form .jof-input:focus,
.jof-form .jof-select:focus {
    outline: 0;
    border-color: var(--jof-focus);
    box-shadow: 0 0 0 .25rem var(--jof-focus-ring);
}
.jof-form .jof-input:disabled,
.jof-form .jof-select:disabled {
    background-color: #e9ecef;
    opacity: 1;
}
.jof-form .jof-input::placeholder {
    color: var(--jof-muted);
    opacity: 1;
}
.jof-form .jof-input.jof-invalid,
.jof-form .jof-select.jof-invalid,
.jof-form .jof-input[aria-invalid="true"] {
    border-color: var(--jof-danger);
}
.jof-form .jof-form-text {
    display: block;
    margin-top: .25rem;
    font-size: .875em;
}
.jof-form .jof-invalid-feedback {
    display: block;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--jof-danger);
}

/* ---- Checkboxes / radios ---- */
.jof-form .jof-check-inline {
    margin: 0;
    cursor: pointer;
}
.jof-form .jof-check-inline input[type="checkbox"],
.jof-form .jof-check-inline input[type="radio"] {
    width: 1em;
    height: 1em;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--jof-primary);
    cursor: pointer;
}

/* ---- Buttons ---- */
.jof-form .jof-btn {
    display: inline-block;
    margin: 0;
    padding: .375rem .75rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    color: var(--jof-text);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--jof-radius);
    cursor: pointer;
    user-select: none;
    transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.jof-form .jof-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--jof-focus-ring);
}
.jof-form .jof-btn:disabled,
.jof-form .jof-btn.jof-disabled {
    opacity: .65;
    pointer-events: none;
}
.jof-form .jof-btn-primary {
    color: var(--jof-primary-text);
    background-color: var(--jof-primary);
    border-color: var(--jof-primary);
}
/* Only the submit button uses per-form settings. Other defaults and
   previous/next controls keep normal primary-button declarations. */
.jof-form .jof-submit-btn.jof-btn-primary {
    color: var(--jof-submit-text, var(--jof-primary-text));
    background-color: var(--jof-submit-background, var(--jof-primary));
    border-color: var(--jof-submit-border, var(--jof-primary));
}
.jof-form .jof-btn-primary:hover {
    color: var(--jof-primary-text);
    background-color: var(--jof-primary-hover);
    border-color: var(--jof-primary-hover);
}
.jof-form .jof-submit-btn.jof-btn-primary:hover {
    color: var(--jof-submit-text-hover, var(--jof-primary-text));
    background-color: var(--jof-submit-background-hover, var(--jof-primary-hover));
    border-color: var(--jof-submit-border-hover, var(--jof-primary-hover));
}
.jof-form .jof-btn-secondary {
    color: var(--jof-secondary-text);
    background-color: var(--jof-secondary);
    border-color: var(--jof-secondary);
}
.jof-form .jof-btn-secondary:hover {
    color: var(--jof-secondary-text);
    background-color: var(--jof-secondary-hover);
    border-color: var(--jof-secondary-hover);
}
.jof-form .jof-btn-success {
    color: #fff;
    background-color: var(--jof-success);
    border-color: var(--jof-success);
}
.jof-form .jof-btn-danger {
    color: #fff;
    background-color: var(--jof-danger);
    border-color: var(--jof-danger);
}
.jof-form .jof-btn-sm {
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: calc(var(--jof-radius) * .67);
}
.jof-form .jof-btn-lg {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-radius: calc(var(--jof-radius) * 1.33);
}
.jof-form .jof-form-nav .jof-btn + .jof-btn {
    margin-left: .5rem;
}

/* ---- Alerts ---- */
.jof-form .jof-alert {
    position: relative;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: var(--jof-radius);
}
.jof-form .jof-alert-success { color: #0f5132; background: #d1e7dd; border-color: #badbcc; }
.jof-form .jof-alert-danger  { color: #842029; background: #f8d7da; border-color: #f5c2c7; }
.jof-form .jof-alert-warning { color: #664d03; background: #fff3cd; border-color: #ffecb5; }
.jof-form .jof-alert-info    { color: #055160; background: #cff4fc; border-color: #b6effb; }

/* ---- Progress (multi-page forms) ---- */
.jof-form .jof-progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    background-color: #e9ecef;
    border-radius: var(--jof-radius);
}
.jof-form .jof-progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: var(--jof-primary);
    transition: width .6s ease;
}

/* ---- Utilities ---- */
.jof-form .jof-mb-0 { margin-bottom: 0 !important; }
.jof-form .jof-mb-4 { margin-bottom: 1.5rem !important; }
.jof-form .jof-mt-2 { margin-top: .5rem !important; }
.jof-form .jof-w-100 { width: 100% !important; }
.jof-form .jof-text-start { text-align: left !important; }
.jof-form .jof-text-center { text-align: center !important; }
.jof-form .jof-text-end { text-align: right !important; }
.jof-form .jof-text-muted { color: var(--jof-muted) !important; }
.jof-form .jof-small { font-size: .875em; }
.jof-form .jof-d-none { display: none !important; }
.jof-form .jof-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- 2.3.11: Label Position = Left (form setting label_position) ---- */
.jof-form .jof-label-left {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.jof-form .jof-label-left > .jof-label {
    flex: 0 0 30%;
    max-width: 30%;
    margin-bottom: 0;
    padding-top: calc(.375rem + 1px); /* align with input text */
    text-align: start;
    overflow-wrap: anywhere;
}
.jof-form .jof-label-left > .jof-field-control {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 575.98px) {
    .jof-form .jof-label-left {
        display: block;
    }
    .jof-form .jof-label-left > .jof-label {
        max-width: none;
        margin-bottom: .5rem;
        padding-top: 0;
        text-align: start;
    }
}