/* ==========================================================================
   Flow forms — shared form and dialog styles
   Based on the "New financial planning line" (Add a job) form, with the
   tabs from Add Schedule Item. Classes are prefixed ff-.

   Structure of a dialog:
     <div class="modal ff-overlay">            (or modal-overlay)
       <div class="modal-content ff-dialog">
         <form class="ff-form">
           <div class="ff-head"> kicker + title + Close </div>
           <div class="ff-tabs"> ... </div>       (optional)
           <div class="ff-body">
             <div class="ff-grid"> .ff-field / .ff-span </div>
             <p class="ff-section">Value</p>
           </div>
           <div class="ff-footer"> Cancel + primary </div>
         </form>
       </div>
     </div>

   HR pages are deliberately not touched by the legacy layer at the bottom.
   ========================================================================== */

:root {
    --ff-overlay: rgba(8, 14, 24, 0.62);
    --ff-dialog-bg: #f7f8fb;
    --ff-dialog-border: #e6ebf2;
    --ff-dialog-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    --ff-title: #171A2E;
    --ff-label: #314055;
    --ff-text: #171A2E;
    --ff-muted: #7b8798;
    --ff-placeholder: #8b97a8;
    --ff-input-bg: #eef2f6;
    --ff-check-border: #d5dbe3;
    --ff-focus: rgba(29, 196, 176, 0.35);
    --ff-section: #1CA4B0;
    --ff-tab-line: #e6ebf2;
    --ff-tab-active-line: #1CA4B0;
    --ff-primary-bg: #3ddec4;
    --ff-primary-bg-hover: #2ed3b8;
    --ff-primary-text: #0b1c24;
    --ff-ghost-bg: #ffffff;
    --ff-ghost-bg-hover: #f3f6f9;
    --ff-ghost-border: #d5dbe3;
    --ff-ghost-text: #243044;
    --ff-danger-bg: #dc3545;
    --ff-danger-bg-hover: #c82333;
    --ff-danger-text: #ffffff;
    --ff-error: #c0392b;
    --ff-error-ring: rgba(220, 53, 69, 0.45);
    --ff-panel-bg: #ffffff;
    --ff-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237b8798' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
    --ff-dialog-bg: #142B3D; /* matches the global dark card colour in admin.css */
    --ff-dialog-border: #2c4154;
    --ff-dialog-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    --ff-title: #ffffff;
    --ff-label: #ffffff;
    --ff-text: #ffffff;
    --ff-muted: #9aabbc;
    --ff-placeholder: #9aabbc;
    --ff-input-bg: #2a3c4e;
    --ff-check-border: #3a5164;
    --ff-tab-line: #2c4154;
    --ff-ghost-bg: #243646;
    --ff-ghost-bg-hover: #2c4154;
    --ff-ghost-border: #3a5164;
    --ff-ghost-text: #e8eef4;
    --ff-error: #ff9fae;
    --ff-panel-bg: #142B3D;
}

/* ---------- Overlay and dialog ---------- */

.modal.ff-overlay,
.modal-overlay.ff-overlay,
.ff-overlay {
    background: var(--ff-overlay) !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
}

.modal-content.ff-dialog,
.ff-overlay .ff-dialog,
.ff-dialog {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    max-height: calc(100vh - 48px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 22px !important;
    background: var(--ff-dialog-bg) !important;
    border: 1px solid var(--ff-dialog-border) !important;
    box-shadow: var(--ff-dialog-shadow) !important;
    color: var(--ff-text) !important;
    box-sizing: border-box !important;
}

.modal-content.ff-dialog.ff-dialog-lg,
.ff-dialog.ff-dialog-lg { width: min(980px, 100%) !important; max-width: 980px !important; }

/* The hidden attribute always wins inside ff dialogs and panels */
.ff-dialog [hidden],
.ff-panel [hidden] { display: none !important; }

/* Centre the dialog whether the overlay is shown as flex or block */
.ff-overlay > .ff-dialog { margin: auto !important; }

.modal-content.ff-dialog.ff-dialog-sm,
.ff-dialog.ff-dialog-sm { width: min(520px, 100%) !important; }

.ff-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
}

.ff-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 28px 22px;
    flex-shrink: 0;
}

.ff-kicker {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ff-muted);
}

.ff-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ff-title);
}

.ff-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 2px 28px 4px;
}

.ff-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 22px 28px;
    flex-shrink: 0;
}

/* ---------- Page panel (forms that are not in a dialog) ---------- */

.ff-panel {
    background: var(--ff-panel-bg);
    border: 1px solid var(--ff-dialog-border);
    border-radius: 22px;
}
.ff-panel .ff-body { overflow: visible; }

/* ---------- Tabs ---------- */

.ff-tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 28px 20px;
    border-bottom: 1px solid var(--ff-tab-line);
    flex-shrink: 0;
    overflow-x: auto;
}

.ff-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.85rem 1rem;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--ff-muted);
    cursor: pointer;
    white-space: nowrap;
}

.ff-tab:hover { color: var(--ff-title); }

.ff-tab.is-active {
    color: var(--ff-title);
    border-bottom-color: var(--ff-tab-active-line);
}

.ff-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ff-focus);
    border-radius: 8px 8px 0 0;
}

.ff-tab.has-error::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--ff-error);
    vertical-align: middle;
}

.ff-panel-tab[hidden] { display: none !important; }

/* Keep tabbed dialogs the same height when switching tabs, so the footer doesn't jump */
.ff-dialog .ff-form:has(.ff-tabs) .ff-body { min-height: min(520px, calc(100vh - 330px)); }

/* ---------- Grid ---------- */

.ff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 22px;
}

.ff-grid + .ff-grid { margin-top: 16px; }

.ff-span { grid-column: 1 / -1; }

.ff-field { min-width: 0; }

.ff-field > label,
.ff-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ff-label);
}

.ff-optional {
    font-weight: 500;
    color: var(--ff-muted);
}

.ff-section {
    margin: 22px 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ff-section);
}

.ff-body > .ff-section:first-child { margin-top: 0; }
.ff-dialog :is(.modal-body, form) > p.ff-section:first-of-type { margin-top: 0; }

.ff-aside {
    align-self: end;
    margin: 0 0 12px;
    max-width: 240px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ff-muted);
}

.ff-help {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ff-muted);
}

.ff-error[hidden] { display: none !important; }
.ff-error {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ff-error);
}

/* ---------- Inputs ---------- */

:is(.ff-dialog, .ff-panel) .ff-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: var(--ff-input-bg);
    color: var(--ff-text);
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    box-sizing: border-box;
    min-height: 47px;
    transition: box-shadow 0.15s ease;
}

:is(.ff-dialog, .ff-panel) textarea.ff-input {
    min-height: 92px;
    resize: vertical;
}

:is(.ff-dialog, .ff-panel) select.ff-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--ff-chevron);
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

:is(.ff-dialog, .ff-panel) select.ff-input[multiple] {
    background-image: none;
    padding-right: 14px;
}

:is(.ff-dialog, .ff-panel) .ff-input::placeholder { color: var(--ff-placeholder); }

:is(.ff-dialog, .ff-panel) .ff-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--ff-focus);
}

:is(.ff-dialog, .ff-panel) .ff-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

:is(.ff-dialog, .ff-panel) .ff-input[type="number"]::-webkit-outer-spin-button,
:is(.ff-dialog, .ff-panel) .ff-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

:is(.ff-dialog, .ff-panel) .ff-input[type="date"],
:is(.ff-dialog, .ff-panel) .ff-input[type="time"],
:is(.ff-dialog, .ff-panel) .ff-input[type="datetime-local"] {
    min-height: 47px;
}

[data-theme="dark"] :is(.ff-dialog, .ff-panel) .ff-input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] :is(.ff-dialog, .ff-panel) .ff-input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] :is(.ff-dialog, .ff-panel) .ff-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

:is(.ff-dialog, .ff-panel) .ff-input[type="color"] {
    padding: 5px;
    cursor: pointer;
}
:is(.ff-dialog, .ff-panel) .ff-input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
:is(.ff-dialog, .ff-panel) .ff-input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }
:is(.ff-dialog, .ff-panel) .ff-input[type="color"]::-moz-color-swatch { border: none; border-radius: 8px; }

:is(.ff-dialog, .ff-panel) .ff-input[type="file"] {
    padding: 10px 14px;
    cursor: pointer;
}

:is(.ff-dialog, .ff-panel) .ff-input:disabled,
:is(.ff-dialog, .ff-panel) .ff-input.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

:is(.ff-dialog, .ff-panel) .ff-input[aria-invalid="true"],
:is(.ff-dialog, .ff-panel) .ff-field.is-invalid .ff-input {
    box-shadow: 0 0 0 2px var(--ff-error-ring);
}

/* Checkbox / radio row */
.ff-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ff-label);
    cursor: pointer;
    min-height: 32px;
}

.ff-check input[type="checkbox"],
.ff-check input[type="radio"],
input[type="checkbox"].ff-checkbox,
input[type="radio"].ff-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    border: 1px solid var(--ff-check-border);
    border-radius: 6px;
    background-color: var(--ff-input-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ff-check input[type="radio"],
input[type="radio"].ff-checkbox { border-radius: 50%; }

.ff-check input:is([type="checkbox"], [type="radio"]):checked,
input:is([type="checkbox"], [type="radio"]).ff-checkbox:checked {
    background-color: var(--ff-section);
    border-color: var(--ff-section);
}

.ff-check input[type="checkbox"]:checked,
input[type="checkbox"].ff-checkbox:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2 5 8.6 9.5 3.6'/%3E%3C/svg%3E");
}

.ff-check input[type="radio"]:checked,
input[type="radio"].ff-checkbox:checked {
    background-image: radial-gradient(circle, #ffffff 0 3px, transparent 3.5px);
    background-size: auto;
}

.ff-check input:is([type="checkbox"], [type="radio"]):focus-visible,
input:is([type="checkbox"], [type="radio"]).ff-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ff-focus);
}

.ff-check input:is([type="checkbox"], [type="radio"]):disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ff-field > label.ff-check,
label.ff-check {
    display: inline-flex;
    margin-bottom: 0;
}

/* A field whose control sits on the input baseline (e.g. a checkbox next to a colour) */
.ff-field-inline {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 6px;
}


/* Beat the global dark-mode input rules in admin.css */
[data-theme="dark"] :is(.ff-dialog, .ff-panel) :is(input, select, textarea).ff-input,
[data-theme="dark"] :is(.ff-dialog, .ff-panel) :is(input, select, textarea).ff-input:focus {
    background-color: var(--ff-input-bg);
    color: var(--ff-text);
    border-color: transparent;
}
[data-theme="dark"] :is(.ff-dialog, .ff-panel) select.ff-input:not([multiple]),
[data-theme="dark"] :is(.ff-dialog, .ff-panel) select.ff-input:not([multiple]):focus {
    background-image: var(--ff-chevron);
    background-repeat: no-repeat;
    background-position: right 14px center;
}
[data-theme="dark"] :is(.ff-dialog, .ff-panel) :is(input, select, textarea).ff-input:disabled {
    background-color: var(--ff-input-bg);
    color: var(--ff-muted);
}

/* ---------- Buttons ---------- */

.ff-btn-ghost,
.ff-btn-primary,
.ff-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.ff-btn-ghost {
    background: var(--ff-ghost-bg);
    border: 1px solid var(--ff-ghost-border);
    color: var(--ff-ghost-text);
}
.ff-btn-ghost:hover { background: var(--ff-ghost-bg-hover); }

.ff-btn-primary {
    background: var(--ff-primary-bg);
    border: 1px solid transparent;
    color: var(--ff-primary-text);
}
.ff-btn-primary:hover { background: var(--ff-primary-bg-hover); }

.ff-btn-danger {
    background: var(--ff-danger-bg);
    border: 1px solid transparent;
    color: var(--ff-danger-text);
}
.ff-btn-danger:hover { background: var(--ff-danger-bg-hover); }

.ff-btn-ghost:focus-visible,
.ff-btn-primary:focus-visible,
.ff-btn-danger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ff-focus);
}

.ff-btn-primary:disabled,
.ff-btn-ghost:disabled,
.ff-btn-danger:disabled {
    opacity: 0.55;
    cursor: default;
}

.ff-btn-block { width: 100%; }

/* Icons for buttons whose text is replaced by JavaScript (textContent would remove an <i>) */
.ff-icon-plus::before,
.ff-icon-save::before,
.ff-icon-times::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
.ff-icon-plus::before { content: "\2b"; }
.ff-icon-save::before { content: "\f0c7"; }
.ff-icon-times::before { content: "\f00d"; }

/* ---------- Searchable dropdowns (Select2) inside ff dialogs ---------- */

.ff-dialog .select2-container { width: 100% !important; }

.ff-dialog .select2-container--default .select2-selection--single,
.ff-dialog .select2-container--default .select2-selection--multiple {
    border-radius: 12px;
    border: 1px solid transparent;
    background-color: var(--ff-input-bg);
    min-height: 47px;
}

.ff-dialog .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 45px;
    padding-left: 14px;
    padding-right: 38px;
    color: var(--ff-text);
    font-size: 15px;
}

.ff-dialog .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 45px;
    right: 8px;
}

.ff-dialog .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--ff-placeholder);
}

.ff-dialog .select2-container--default.select2-container--focus .select2-selection--single,
.ff-dialog .select2-container--default.select2-container--open .select2-selection--single {
    box-shadow: 0 0 0 2px var(--ff-focus);
}

.ff-overlay .select2-dropdown {
    border-radius: 12px;
    border-color: var(--ff-dialog-border);
    overflow: hidden;
}

.ff-overlay .select2-search--dropdown .select2-search__field {
    border-radius: 8px;
    padding: 8px 10px;
}

[data-theme="dark"] .ff-overlay .select2-dropdown,
[data-theme="dark"] .ff-overlay .select2-search--dropdown .select2-search__field {
    background: #1c2b3a;
    color: #ffffff;
    border-color: #2c4154;
}

[data-theme="dark"] .ff-overlay .select2-results__option { color: #ffffff; }

[data-theme="dark"] .ff-overlay .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: #1CA4B0;
    color: #ffffff;
}

/* ---------- Draggable dialogs ----------
   admin.js makes any .modal-content with a .modal-header draggable. Dialogs that
   keep that behaviour put both classes on the header: <div class="ff-head modal-header">. */

.ff-dialog { cursor: auto; user-select: auto; }
.ff-head.modal-header {
    padding: 28px 28px 22px;
    border-bottom: 0;
    cursor: move;
}
.ff-head.modal-header:hover { background-color: transparent; }
.ff-head.modal-header::before { display: none; }
.ff-head.modal-header :is(h2, h3).ff-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ff-title);
}

/* ---------- Staff and group pickers inside ff dialogs ---------- */

.ff-dialog .group-selection-container {
    margin: 0 0 18px;
    padding: 16px;
    background: var(--ff-ghost-bg);
    border: 1px solid var(--ff-dialog-border);
    border-radius: 16px;
}
.ff-dialog .group-selection-header { margin-bottom: 0; justify-content: space-between; }
.ff-dialog .group-selection-header h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ff-title);
}
.ff-dialog .group-selection-header h4 i { color: var(--ff-section); margin-right: 6px; }
.ff-dialog .group-selection-toggle,
.ff-dialog .group-button {
    background: var(--ff-input-bg);
    color: var(--ff-title);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}
.ff-dialog .group-selection-toggle:hover,
.ff-dialog .group-button:hover { background: var(--ff-ghost-bg-hover); border-color: var(--ff-ghost-border); }
.ff-dialog .group-button.selected {
    background: var(--ff-section);
    border-color: var(--ff-section);
    color: #ffffff;
}
.ff-dialog .group-selection-content.show { margin-top: 14px; }
.ff-dialog .selected-staff-preview {
    background: var(--ff-input-bg);
    border: 0;
    border-radius: 12px;
    padding: 12px;
}
.ff-dialog .selected-staff-preview h5 { font-size: 13px; font-weight: 700; color: var(--ff-label); }
.ff-dialog .selected-staff-item {
    background: var(--ff-ghost-bg);
    color: var(--ff-text);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
}
.ff-dialog .clear-selection-btn {
    margin: 10px 0 0;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 700;
}
.ff-dialog .assigned-staff-list,
.ff-dialog .assigned-contacts-list {
    margin-top: 10px;
    min-height: 47px;
    padding: 4px 6px;
    background: var(--ff-input-bg);
    border-radius: 12px;
    border-color: transparent;
}
.ff-dialog .assigned-staff-item,
.ff-dialog .assigned-contact-item { background: var(--ff-ghost-bg); }
.ff-dialog .no-staff-selected {
    padding: 10px 8px;
    background: transparent;
    border: 0;
    font-style: normal;
    color: var(--ff-muted);
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
    .ff-head,
    .ff-head.modal-header { padding: 22px 18px 18px; }
    .ff-body { padding: 2px 18px 4px; }
    .ff-footer { padding: 18px; }
    .ff-tabs { margin: 0 18px 16px; }
    .ff-tab { padding: 0.75rem 0.6rem; font-size: 13.5px; }
    .ff-grid { grid-template-columns: 1fr; }
    .ff-title { font-size: 24px; }
    .ff-aside { max-width: none; }
}

/* ==========================================================================
   Existing markup inside ff dialogs
   Lets a dialog that still uses the older classes (modal-header, modal-body,
   form-tabs/tab-button, form-section, form-group, form-row, btn-*) take the
   Add a job look just by adding "ff-overlay" and "ff-dialog". JavaScript that
   toggles .tab-button.active / .tab-pane.active keeps working.
   ========================================================================== */

.ff-dialog > .modal-header,
.ff-dialog > form > .modal-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 28px 28px 22px !important;
    margin: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}
.ff-dialog > .modal-header:hover,
.ff-dialog > form > .modal-header:hover { background: transparent; }
.ff-dialog > .modal-header::before,
.ff-dialog > form > .modal-header::before { display: none; }

.ff-dialog .modal-header :is(h2, h3) {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ff-title);
}
[data-theme="dark"] .ff-dialog .modal-header :is(h2, h3) { color: var(--ff-title); }
.ff-dialog .modal-header :is(h2, h3) > i { display: none; }

.ff-dialog > .modal-body,
.ff-dialog > form > .modal-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 2px 28px 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.ff-dialog > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
}

/* Footer: fixed at the bottom of the dialog, or stuck to the bottom of the scrolling body */
.ff-dialog > .modal-footer,
.ff-dialog > form > .modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding: 22px 28px !important;
    margin: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}
.ff-dialog .modal-body :is(.modal-footer, .form-actions, .modal-actions) {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 6px 0 0;
    padding: 18px 0 22px;
    border-top: 0;
    background: var(--ff-dialog-bg);
}
/* When the <form> itself is the scrolling .modal-body, its footer sticks inside it */
.ff-dialog > form.modal-body > :is(.modal-footer, .form-actions, .modal-actions) {
    position: sticky !important;
    bottom: 0 !important;
    padding: 18px 0 22px !important;
    margin: 6px 0 0 !important;
    background: var(--ff-dialog-bg) !important;
}
.ff-dialog :is(.modal-footer, .form-actions, .modal-actions) > :is(.btn-secondary, .btn-outline-secondary, .btn-light, .ff-btn-ghost) { order: -1; }
[data-theme="dark"] .ff-dialog :is(.modal-footer, .form-actions, .modal-actions) { background-color: var(--ff-dialog-bg); border-top: 0; }
[data-theme="dark"] .ff-dialog > :is(.modal-footer, form > .modal-footer) { background: transparent; }

/* Tabs */
.ff-dialog .form-tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--ff-tab-line);
    border-radius: 0;
    background: var(--ff-dialog-bg);
    position: sticky;
    top: 0;
    z-index: 3;
    overflow-x: auto;
}
.ff-dialog .form-tabs .tab-button {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin: 0 0 -1px;
    padding: 0.85rem 1rem;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--ff-muted);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
}
.ff-dialog .form-tabs .tab-button:hover { color: var(--ff-title); background: transparent; }
.ff-dialog .form-tabs .tab-button:is(.active, .is-active) {
    color: var(--ff-title);
    background: transparent;
    border-bottom-color: var(--ff-tab-active-line);
}
[data-theme="dark"] .ff-dialog .form-tabs .tab-button { background: transparent; color: var(--ff-muted); }
[data-theme="dark"] .ff-dialog .form-tabs .tab-button:is(.active, .is-active, :hover) { color: var(--ff-title); }
.ff-dialog .ff-tab.active { color: var(--ff-title); border-bottom-color: var(--ff-tab-active-line); }

/* Panels for the shared tab script (assets/js/flow-forms.js) */
[data-ff-panel]:not(.active) { display: none !important; }

/* Sections */
.ff-dialog .form-section {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.ff-dialog .form-section > :is(h4, h5, .form-section-title),
.ff-dialog .ff-section-heading {
    margin: 22px 0 14px;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ff-section);
    background: transparent;
}
.ff-dialog .form-section > :is(h4, h5) > i { display: none; }
.ff-dialog :is(.tab-pane, .modal-body, form) > .form-section:first-child > :is(h4, h5):first-child { margin-top: 0; }
[data-theme="dark"] .ff-dialog .form-section { background: transparent; border: 0; }
[data-theme="dark"] .ff-dialog .form-section > :is(h4, h5) { color: var(--ff-section); border: 0; }

/* Sub-sections (e.g. Departure / Arrival inside a journey tab) */
.ff-dialog .form-subsection {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.ff-dialog .form-subsection > h5 {
    margin: 22px 0 14px;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ff-section);
    background: transparent;
}
.ff-dialog .form-subsection > h5 > i { display: none; }
.ff-dialog :is(.tab-pane, .form-section) > .form-subsection:first-child > h5 { margin-top: 0; }
[data-theme="dark"] .ff-dialog .form-subsection { background: transparent; border: 0; }
[data-theme="dark"] .ff-dialog .form-subsection > h5 { color: var(--ff-section); }

.ff-return-toggle {
    margin: 8px 0 4px;
    padding: 16px;
    border-radius: 16px;
    background: var(--ff-ghost-bg);
    border: 1px solid var(--ff-dialog-border);
}
.ff-return-toggle .form-help { margin-left: 30px; }
[data-ff-return-pane] > .ff-return-toggle { margin: 0 0 20px; }
[data-ff-return-pane] > .ff-return-toggle .form-help { display: block; margin-top: 4px; }

/* Input with an inline action button (Flight Number + Lookup) */
.ff-input-action { display: flex; gap: 8px; align-items: stretch; }
.ff-input-action > input { flex: 1 1 auto; min-width: 0; }
.ff-input-action > .btn { flex: 0 0 auto; white-space: nowrap; margin: 0 !important; height: auto; align-self: stretch; }

.ff-btn-block.btn { width: 100%; display: flex; justify-content: center; }

/* Grid and fields */
.ff-dialog .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 22px;
    margin: 0 0 16px;
}
.ff-dialog .form-row.three-columns { grid-template-columns: 1fr 1fr 1fr; }
.ff-dialog .form-row > .form-group { margin-bottom: 0; }
.ff-dialog .form-row > :is(.form-group, .form-field):only-child { grid-column: 1 / -1; }

.ff-dialog :is(.form-group, .form-field) { margin: 0 0 16px; min-width: 0; }

.ff-dialog :is(.form-group, .form-field) > label:not(.ff-check):not(.checkbox-label):not(:has(> input[type="checkbox"], > input[type="radio"])) {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ff-label);
}
[data-theme="dark"] .ff-dialog :is(.form-group, .form-field) > label { color: var(--ff-label); }

:is(.ff-dialog, .ff-panel) :is(.form-group, .form-field, .ff-field) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]):not([type="range"]):not([type="file"]), select, textarea), :is(.ff-dialog, .ff-panel) .form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: var(--ff-input-bg);
    color: var(--ff-text);
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    min-height: 47px;
    box-sizing: border-box;
    box-shadow: none;
}
:is(.ff-dialog, .ff-panel) :is(.form-group, .form-field, .ff-field) textarea, :is(.ff-dialog, .ff-panel) textarea.form-control { min-height: 92px; resize: vertical; }
:is(.ff-dialog, .ff-panel) :is(.form-group, .form-field, .ff-field) select:not([multiple]), :is(.ff-dialog, .ff-panel) select.form-control:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--ff-chevron);
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}
:is(.ff-dialog, .ff-panel) :is(.form-group, .form-field, .ff-field) :is(input, select, textarea):focus, :is(.ff-dialog, .ff-panel) .form-control:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--ff-focus);
}
:is(.ff-dialog, .ff-panel) :is(.form-group, .form-field) ::placeholder, :is(.ff-dialog, .ff-panel) .form-control::placeholder { color: var(--ff-placeholder); }
:is(.ff-dialog, .ff-panel) :is(.form-group, .form-field) :is(input, select, textarea):disabled { opacity: 0.55; cursor: not-allowed; }
:is(.ff-dialog, .ff-panel) :is(.form-group, .form-field) input[type="color"] {
    width: 100%;
    min-height: 47px;
    padding: 5px;
    border: 0;
    border-radius: 12px;
    background: var(--ff-input-bg);
    cursor: pointer;
}
:is(.ff-dialog, .ff-panel) :is(.form-group, .form-field) input[type="file"] {
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--ff-input-bg);
    color: var(--ff-text);
    font-size: 14px;
}

[data-theme="dark"] :is(.ff-dialog, .ff-panel) :is(.form-group, .form-field, .ff-field) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]):not([type="range"]):not([type="file"]), select, textarea),
[data-theme="dark"] :is(.ff-dialog, .ff-panel) :is(.form-group, .form-field, .ff-field) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]):not([type="range"]):not([type="file"]), select, textarea):focus,
[data-theme="dark"] :is(.ff-dialog, .ff-panel) .form-control,
[data-theme="dark"] :is(.ff-dialog, .ff-panel) .form-control:focus {
    background-color: var(--ff-input-bg);
    color: var(--ff-text);
    border-color: transparent;
}
[data-theme="dark"] :is(.ff-dialog, .ff-panel) :is(.form-group, .form-field, .ff-field) select:not([multiple]),
[data-theme="dark"] :is(.ff-dialog, .ff-panel) select.form-control:not([multiple]) {
    background-image: var(--ff-chevron);
    background-repeat: no-repeat;
    background-position: right 14px center;
}
[data-theme="dark"] :is(.ff-dialog, .ff-panel) :is(.form-group, .form-field) :is(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-calendar-picker-indicator { filter: invert(1); }

:is(.ff-dialog, .ff-panel) :is(.form-help, .form-text, .help-text, .field-help, small.text-muted) {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    font-style: normal;
    color: var(--ff-muted);
}


/* Fields that are not wrapped in a .form-group still get the filled look */
.ff-dialog :is(.modal-body, .ff-body) :is(input:is([type="text"], [type="password"], [type="email"], [type="number"], [type="url"], [type="search"], [type="tel"], [type="date"], [type="time"], [type="datetime-local"]), select, textarea):not(.ff-input):not(.select2-search__field):not(.form-control):not([class*="pcr-"]) {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: var(--ff-input-bg);
    color: var(--ff-text);
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    min-height: 47px;
    box-sizing: border-box;
    box-shadow: none;
}
.ff-dialog :is(.modal-body, .ff-body) select:not(.ff-input):not(.form-control):not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--ff-chevron);
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}
.ff-dialog :is(.modal-body, .ff-body) :is(input, select, textarea):not(.ff-input):focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--ff-focus);
}
[data-theme="dark"] .ff-dialog :is(.modal-body, .ff-body) :is(input:is([type="text"], [type="password"], [type="email"], [type="number"], [type="url"], [type="search"], [type="tel"], [type="date"], [type="time"], [type="datetime-local"]), select, textarea):not(.ff-input) {
    background-color: var(--ff-input-bg);
    color: var(--ff-text);
    border-color: transparent;
}
[data-theme="dark"] .ff-dialog :is(.modal-body, .ff-body) select:not(.ff-input):not([multiple]) {
    background-image: var(--ff-chevron);
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* admin.css paints password fields white with an !important inset shadow; use the field grey instead */
:is(.ff-dialog, .ff-panel) input[type="password"],
body.ff-legacy:not([data-page^="hr-"]) .modal-content input[type="password"] {
    box-shadow: 0 0 0 100px var(--ff-input-bg) inset !important;
    -webkit-box-shadow: 0 0 0 100px var(--ff-input-bg) inset !important;
}
:is(.ff-dialog, .ff-panel) input[type="password"]:focus,
body.ff-legacy:not([data-page^="hr-"]) .modal-content input[type="password"]:focus {
    box-shadow: 0 0 0 100px var(--ff-input-bg) inset, 0 0 0 2px var(--ff-focus) !important;
    -webkit-box-shadow: 0 0 0 100px var(--ff-input-bg) inset, 0 0 0 2px var(--ff-focus) !important;
}

/* Buttons */
:is(.ff-dialog, .ff-panel) :is(.btn-primary, .btn-secondary, .btn-danger, .btn-success, .btn-outline-secondary, .btn-light):not(.btn-sm):not(.btn-xs):not(.btn-icon) {
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}
:is(.ff-dialog, .ff-panel) :is(.btn-primary, .btn-success) { background: var(--ff-primary-bg) !important; border: 1px solid transparent !important; color: var(--ff-primary-text) !important; }
:is(.ff-dialog, .ff-panel) :is(.btn-primary, .btn-success):hover { background: var(--ff-primary-bg-hover) !important; color: var(--ff-primary-text) !important; }
:is(.ff-dialog, .ff-panel) :is(.btn-secondary, .btn-outline-secondary, .btn-light) { background: var(--ff-ghost-bg) !important; border: 1px solid var(--ff-ghost-border) !important; color: var(--ff-ghost-text) !important; }
:is(.ff-dialog, .ff-panel) :is(.btn-secondary, .btn-outline-secondary, .btn-light):hover { background: var(--ff-ghost-bg-hover) !important; color: var(--ff-ghost-text) !important; }
:is(.ff-dialog, .ff-panel) .btn-danger { background: var(--ff-danger-bg) !important; border: 1px solid transparent !important; color: var(--ff-danger-text) !important; }

.ff-dialog .modal-close {
    flex-shrink: 0 !important !important;
    width: 40px !important !important;
    height: 40px !important !important;
    display: inline-flex !important !important;
    align-items: center !important !important;
    justify-content: center !important !important;
    padding: 0 !important !important;
    border-radius: 12px !important !important;
    background: var(--ff-ghost-bg) !important !important;
    border: 1px solid var(--ff-ghost-border) !important !important;
    color: var(--ff-ghost-text) !important !important;
    font-size: 16px !important !important;
}
.ff-dialog .modal-close:hover { background: var(--ff-ghost-bg-hover) !important; color: var(--ff-ghost-text) !important; }


:is(.ff-dialog, .ff-panel) .btn-outline-primary:not(.btn-sm) { border-radius: 12px !important; font-weight: 700 !important; padding: 10px 16px !important; }
:is(.ff-dialog, .ff-panel) .btn-outline-primary { background: var(--ff-ghost-bg) !important; border: 1px solid var(--ff-ghost-border) !important; color: var(--ff-ghost-text) !important; }
:is(.ff-dialog, .ff-panel) .btn-outline-danger { background: var(--ff-ghost-bg) !important; border: 1px solid var(--ff-ghost-border) !important; color: var(--ff-danger-bg) !important; border-radius: 12px !important; }
/* Checkboxes and radios */
:is(.ff-dialog, .ff-panel) input[type="checkbox"]:not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))),
:is(.ff-dialog, .ff-panel) input[type="radio"]:not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))) {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0 8px 0 0;
    padding: 0;
    flex-shrink: 0;
    vertical-align: middle;
    border: 1px solid var(--ff-check-border);
    border-radius: 6px;
    background-color: var(--ff-input-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    cursor: pointer;
}
:is(.ff-dialog, .ff-panel) input[type="radio"]:not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))) { border-radius: 50%; }
:is(.ff-dialog, .ff-panel) input:is([type="checkbox"], [type="radio"]):not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))):checked { background-color: var(--ff-section); border-color: var(--ff-section); }
:is(.ff-dialog, .ff-panel) input[type="checkbox"]:not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))):checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2 5 8.6 9.5 3.6'/%3E%3C/svg%3E");
}
:is(.ff-dialog, .ff-panel) input[type="radio"]:not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))):checked { background-image: radial-gradient(circle, #ffffff 0 3px, transparent 3.5px); background-size: auto; }
:is(.ff-dialog, .ff-panel) input:is([type="checkbox"], [type="radio"]):not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ff-focus); }
:is(.ff-dialog, .ff-panel) :is(.form-group, .form-field) > label:has(> input[type="checkbox"], > input[type="radio"]),
:is(.ff-dialog, .ff-panel) .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ff-label);
    text-transform: none;
    cursor: pointer;
}


/* Any label that wraps a checkbox or radio sits on one line with it */
.ff-dialog label:has(> input[type="checkbox"], > input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    text-transform: none;
}
.ff-dialog label:has(> input[type="checkbox"], > input[type="radio"]) > input { margin: 0; }

@media (max-width: 640px) {
    .ff-dialog > .modal-header, .ff-dialog > form > .modal-header { padding: 22px 18px 18px; }
    .ff-dialog > .modal-body, .ff-dialog > form > .modal-body { padding: 2px 18px 0; }
    .ff-dialog > .modal-footer, .ff-dialog > form > .modal-footer { padding: 18px; }
    .ff-dialog .form-row, .ff-dialog .form-row.three-columns { grid-template-columns: 1fr; }
    .ff-dialog .form-tabs .tab-button { padding: 0.75rem 0.6rem; font-size: 13.5px; }
}


/* ==========================================================================
   Page forms (not in a dialog): add "ff-panel" to the card that holds the form,
   e.g. <div class="content-card ff-panel">. Uses the same fields, buttons and
   checkboxes as the dialogs (see the :is(.ff-dialog, .ff-panel) rules above).
   ========================================================================== */
.content-card.ff-panel,
.ff-panel {
    background: var(--ff-dialog-bg) !important;
    border: 1px solid var(--ff-dialog-border) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    color: var(--ff-text);
    overflow: visible;
}
.ff-panel > .card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 28px 6px !important;
    background: transparent !important;
    border-bottom: 0 !important;
}
.ff-panel > .card-header :is(h2, h3, h4, h5) {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--ff-title);
}
.ff-panel > .card-header :is(h2, h3, h4, h5) > i { display: none; }
.ff-panel > .card-header p { margin: 6px 0 0; color: var(--ff-muted); font-size: 13.5px; }
.ff-panel > :is(h3, h4):first-child { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--ff-title); }
.ff-panel > .card-body { padding: 16px 28px 26px !important; background: transparent !important; }
.ff-panel :is(.form-section) { margin: 0 0 6px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.ff-panel :is(.form-section > h4, h4.ff-section-heading, .card-body > h4) {
    margin: 22px 0 14px;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ff-section) !important;
}
.ff-panel .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; margin: 0 0 16px; }
.ff-panel .form-row > .form-group { margin-bottom: 0; }
.ff-panel :is(.form-group, .form-field) { margin: 0 0 16px; }
.ff-panel :is(.form-group, .form-field) > label:not(.ff-check):not(:has(> input[type="checkbox"], > input[type="radio"])) {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ff-label);
}
.ff-panel label:has(> input[type="checkbox"], > input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--ff-label);
}
.ff-panel :is(.form-actions, .modal-footer) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding: 0;
    border-top: 0;
    background: transparent;
}
.ff-panel :is(.form-actions, .modal-footer) > :is(.btn-secondary, .btn-outline-secondary, .btn-light) { order: -1; }
[data-theme="dark"] .ff-panel { background: var(--ff-dialog-bg) !important; }
[data-theme="dark"] .ff-panel > .card-header { background: transparent !important; border-bottom: 0 !important; }
[data-theme="dark"] .ff-panel > .card-header :is(h2, h3, h4, h5) { color: var(--ff-title); }
[data-theme="dark"] .ff-panel :is(.form-group, .form-field) > label { color: var(--ff-label); }
@media (max-width: 640px) {
    .ff-panel > .card-header { padding: 20px 18px 4px !important; }
    .ff-panel > .card-body { padding: 14px 18px 20px !important; }
    .ff-panel .form-row { grid-template-columns: 1fr; }
}

/* Sign-in pages: the login card uses the panel look, one full-width primary button */
.login-container.ff-signin {
    padding: 32px 30px 28px !important;
    max-width: 440px;
}
.ff-signin .login-form { text-align: left; }
.ff-signin .login-button.ff-btn-primary {
    width: 100%;
    min-height: 47px;
    margin-top: 6px;
    background: var(--ff-primary-bg) !important;
    color: var(--ff-primary-text) !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-size: 15px;
    font-weight: 700;
    box-shadow: none !important;
    transform: none !important;
}
.ff-signin .login-button.ff-btn-primary:hover { background: var(--ff-primary-bg-hover) !important; }
.ff-signin .login-button.ff-btn-primary:disabled { opacity: 0.55; }

/* ==========================================================================
   Legacy layer
   Gives forms that have not been converted yet the same field and button
   look, inside dialogs only. Switched on with the "ff-legacy" class on
   <body> (see $flowFormsLegacy in index.php). HR pages and the HR parts
   of Settings are excluded.
   ========================================================================== */

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) {
    border-radius: 22px;
    background: var(--ff-dialog-bg);
    border: 1px solid var(--ff-dialog-border);
    box-shadow: var(--ff-dialog-shadow);
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) .modal-header {
    border-bottom: 0;
    padding: 28px 28px 14px;
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) .modal-header :is(h2, h3) {
    font-size: 24px;
    font-weight: 700;
    color: var(--ff-title);
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) .modal-body {
    padding: 8px 28px 4px;
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) .modal-footer {
    border-top: 0;
    padding: 18px 28px 22px;
    gap: 10px;
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) :is(.form-group, .form-field) > label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ff-label);
    margin-bottom: 8px;
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) :is(
    .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]):not([type="range"]),
    .form-group select,
    .form-group textarea,
    .form-control
) {
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: var(--ff-input-bg);
    color: var(--ff-text);
    font-size: 15px;
    line-height: 1.4;
    min-height: 47px;
    box-sizing: border-box;
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) :is(.form-group select, select.form-control):not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--ff-chevron);
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) :is(.form-group input, .form-group select, .form-group textarea, .form-control):focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--ff-focus);
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) :is(.form-group, .form-control)::placeholder,
body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) .form-group ::placeholder {
    color: var(--ff-placeholder);
}

/* Checkboxes and radios: same grey box as the Add a job form (toggle switches are left alone) */
body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) input[type="checkbox"]:not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))),
body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) input[type="radio"]:not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))) {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0 8px 0 0;
    padding: 0;
    flex-shrink: 0;
    vertical-align: middle;
    border: 1px solid var(--ff-check-border);
    border-radius: 6px;
    background-color: var(--ff-input-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    cursor: pointer;
}
body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) input[type="radio"]:not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))) { border-radius: 50%; }
body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) input:is([type="checkbox"], [type="radio"]):not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))):checked {
    background-color: var(--ff-section);
    border-color: var(--ff-section);
}
body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) input[type="checkbox"]:not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))):checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2 5 8.6 9.5 3.6'/%3E%3C/svg%3E");
}
body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) input[type="radio"]:not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))):checked {
    background-image: radial-gradient(circle, #ffffff 0 3px, transparent 3.5px);
    background-size: auto;
}
body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) input:is([type="checkbox"], [type="radio"]):not(:is(.toggle-switch, .zoom-toggle-switch, .view-toggle-switch, .switch, .toggle-option) *):not(:has(+ :is(.toggle-slider, .slider))):focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ff-focus);
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) :is(.btn-primary, .btn-secondary, .btn-danger, .btn-success, .btn-outline-secondary, .btn-light):not(.btn-sm):not(.btn-xs):not(.btn-icon) {
    border-radius: 12px;
    font-weight: 700;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.4;
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) :is(.btn-primary, .btn-success) {
    background: var(--ff-primary-bg);
    border: 1px solid transparent;
    color: var(--ff-primary-text);
}
body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) :is(.btn-primary, .btn-success):hover {
    background: var(--ff-primary-bg-hover);
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) :is(.btn-secondary, .btn-outline-secondary, .btn-light) {
    background: var(--ff-ghost-bg);
    border: 1px solid var(--ff-ghost-border);
    color: var(--ff-ghost-text);
}
body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) :is(.btn-secondary, .btn-outline-secondary, .btn-light):hover {
    background: var(--ff-ghost-bg-hover);
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) .btn-danger {
    background: var(--ff-danger-bg);
    border: 1px solid transparent;
    color: var(--ff-danger-text);
}

/* Cancel on the left of the primary action, as in the Add a job form */
body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) :is(.modal-footer, .form-actions, .modal-actions) {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) :is(.modal-footer, .form-actions, .modal-actions) > :is(.btn-secondary, .btn-outline-secondary, .btn-light) {
    order: -1;
}

body.ff-legacy:not([data-page^="hr-"]) :is(.modal-content, .modal-dialog):not(.ff-dialog) .modal-close {
    border-radius: 12px;
    background: var(--ff-ghost-bg);
    border: 1px solid var(--ff-ghost-border);
    color: var(--ff-ghost-text);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 16px;
}