/* ==========================================================================
   DBIM forms (registration, feedback, enquiry ...). Loaded by layouts/dbim_form.blade.php after dbim-inner.css.
   Rules applied: instructions first, related fields grouped, one field per line with the label above it,
   clear required marks, standard radio buttons / square checkboxes, prominent primary action,
   visible focus, comfortable control size.  Scoped to main.dbim-inner; the forms' markup is not changed.
   ========================================================================== */

main.dbim-inner form { max-width: 960px; }
main.dbim-inner .dbim-form-note { margin: 0 0 20px; padding: 10px 14px; background: var(--c-alt); border-left: 4px solid var(--c-accent); border-radius: var(--radius); font-size: var(--fs-p2); }
main.dbim-inner .dbim-req { color: var(--dbim-error); font-weight: 700; }
html.dbim-contrast main.dbim-inner .dbim-req { color: #FFEB3B; }

/* one field per line, label above the control (old table-based forms are stacked) */
main.dbim-inner form table:has(input:not([type=hidden]), select, textarea) { display: block; width: 100% !important; border: 0; }
main.dbim-inner form table:has(input:not([type=hidden]), select, textarea) :is(tbody, thead, tfoot, tr) { display: block; width: 100%; }
main.dbim-inner form table:has(input:not([type=hidden]), select, textarea) :is(td, th) { display: block; width: 100% !important; border: 0; padding: 6px 0; background: none; }
main.dbim-inner form table:has(input:not([type=hidden]), select, textarea) tr { margin-bottom: 8px; }
main.dbim-inner form table:has(input:not([type=hidden]), select, textarea) td:empty { display: none; }

main.dbim-inner form label { display: inline-block; margin-bottom: 4px; font-weight: 600; color: var(--c-text); line-height: 1.4; }
main.dbim-inner form legend { padding: 0 6px; font-weight: 700; color: var(--c-primary); }
main.dbim-inner form fieldset { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--c-border); border-radius: var(--radius); }

main.dbim-inner form :is(input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea) { display: block; width: 100%; max-width: 640px; }
main.dbim-inner form :is(input[type=radio], input[type=checkbox]) { display: inline-block; width: 1.15rem; height: 1.15rem; min-height: 0; margin: 0 .5em 0 0; vertical-align: -.2em; accent-color: var(--dbim-blue-700); }
main.dbim-inner form :is(input[type=radio], input[type=checkbox]) + label, main.dbim-inner form label:has(> input[type=radio], > input[type=checkbox]) { display: inline-block; margin-right: 1.25em; font-weight: 500; }
main.dbim-inner form :is(input, select, textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
main.dbim-inner form :is(input, select, textarea)[aria-invalid="true"], main.dbim-inner form .error:is(input, select, textarea) { border-color: var(--dbim-error); }
main.dbim-inner form label.error, main.dbim-inner form span.error, main.dbim-inner form .help-block { display: block; margin-top: 4px; color: var(--dbim-error); font-size: var(--fs-p2); font-weight: 500; }
html.dbim-contrast main.dbim-inner form label.error { color: #FFEB3B; }

/* actions: the primary one is prominent, reset / cancel are quieter */
main.dbim-inner form :is(input[type=submit], button[type=submit]) { min-width: 140px; }
main.dbim-inner form :is(input[type=reset], button[type=reset], input.cancel, .btn-secondary) {
    min-height: 40px; padding: 8px 18px; border: 2px solid var(--c-primary); border-radius: var(--radius); background: transparent; color: var(--c-primary); font: inherit; font-weight: 600; cursor: pointer;
}
main.dbim-inner form :is(input[type=submit], button[type=submit], input[type=reset], button[type=reset]):disabled { opacity: .55; cursor: not-allowed; }
main.dbim-inner form.is-submitting { cursor: progress; }

/* jQuery UI date picker panel */
.ui-datepicker { padding: 8px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: 0 10px 28px rgba(22, 47, 106, .22); font-family: var(--font); z-index: 130 !important; }
.ui-datepicker .ui-datepicker-header { background: var(--dbim-blue-900); color: #fff; border: 0; border-radius: var(--radius); }
.ui-datepicker td a.ui-state-active, .ui-datepicker td a.ui-state-hover { background: var(--dbim-blue-700); color: #fff; border-color: var(--dbim-blue-700); }