/* ========================================
   FD Forms — canonical form control chrome (FD / Pulse only)
   Owner: fd-form-module (FORM-011)
   Spec: docs/fd-form-module/FORMS-SPEC.md
   Scope: .fd-skin .fd-form-field-float (+ F3–F5 modifiers). Legacy Bootstrap
   form pages outside this markup are out of scope — vendor CSS only.
   Load: after fd-legacy-reset.css, before fd-form-validation.css
   ======================================== */

/* Static labels (drawer date-range, modal rows) */
.fd-skin .form-label {
  font-size: var(--form-static-label-size);
  font-weight: var(--form-static-label-weight);
  color: var(--form-static-label-color);
}

/* Pulse float — transparent label notch (Bootstrap ::after) */
.fd-skin .form-floating.fd-form-field-float .form-select:disabled ~ label::after,
.fd-skin .form-floating.fd-form-field-float .form-control:disabled ~ label::after,
.fd-skin .form-floating.fd-form-field-float > :disabled ~ label::after,
.fd-skin .form-floating.fd-form-field-float .form-control[readonly] ~ label::after {
  background-color: transparent !important;
}

.fd-skin .form-floating.fd-form-field-float > .form-select:disabled ~ label,
.fd-skin .form-floating.fd-form-field-float > .form-control:disabled ~ label,
.fd-skin .form-floating.fd-form-field-float > :disabled ~ label {
  color: var(--form-field-disabled-label-color);
}

/* Disabled form controls — soft shell; avoid opacity on the control (breaks label stacking) */
.fd-skin .form-select:disabled,
.fd-skin .form-control:disabled {
  cursor: not-allowed;
  background-color: var(--form-field-disabled-bg) !important;
  border-color: var(--form-field-disabled-border) !important;
  color: var(--form-field-disabled-color);
  -webkit-text-fill-color: var(--form-field-disabled-color);
}

/* Readonly form controls - shared across fd-user-edit, fd-profile-edit, fd-contact-edit, fd-user-set-pw */
.fd-skin .form-control[readonly],
.fd-skin .form-control[readonly]:focus {
  background-color: var(--bg-secondary);
  border-color: var(--border-secondary);
  color: var(--text-tertiary) !important;
  cursor: not-allowed;
  opacity: 0.9;
  position: relative;
}
.fd-skin .form-control[readonly]:focus {
  box-shadow: none;
  border-color: var(--border-secondary);
  color: var(--text-tertiary) !important;
}
.fd-skin .form-floating.fd-form-field-float > input[readonly] + label,
.fd-skin .form-floating.fd-form-field-float > input[readonly]:focus + label {
  color: var(--text-tertiary);
}
.fd-skin .form-control[readonly] {
  border-left: 2px solid rgba(209, 213, 219, 0.4);
  padding-left: calc(var(--inset-md) - 1px);
  color: var(--text-tertiary) !important;
}
.fd-skin .form-control[readonly]::placeholder {
  color: var(--text-muted) !important;
}
/* Disabled select - same visual treatment as other disabled controls */
.fd-skin .form-select[disabled] {
  background-color: var(--form-field-disabled-bg) !important;
  border-color: var(--form-field-disabled-border) !important;
  color: var(--form-field-disabled-color) !important;
  -webkit-text-fill-color: var(--form-field-disabled-color);
  cursor: not-allowed;
  opacity: 1;
}
/* Form page error alert */
.fd-skin .alert-danger {
  background-color: var(--bg-secondary);
  border-color: var(--status-error);
  color: var(--status-error);
}

/* Inline field validation */
.fd-skin .form-control.border-danger {
  border-color: var(--status-error) !important;
}

.fd-skin #error_message {
  display: none;
  color: var(--status-error);
  font-size: var(--form-hint-size);
  margin-top: 0.25rem;
}

/* Password requirements toast (fd-user-add, fd-user-set-pw) */
@keyframes fd-slide-in-fade {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fd-skin .requirement-item .bi {
  color: var(--interactive-primary);
  transition: all var(--transition-fast);
}

.fd-skin .requirement-item.success .bi {
  color: var(--interactive-success);
}

.fd-skin .requirement-item span {
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.fd-skin .requirement-item.success span {
  color: var(--interactive-success);
}

.fd-skin .password-requirements-toast {
  position: fixed;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-02);
  padding: 0;
  z-index: 9999;
  min-width: 280px;
  max-width: 320px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  animation: fd-slide-in-fade 0.2s ease-out;
  pointer-events: auto;
}

.fd-skin .password-toast-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
  padding: var(--space-md);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  align-items: center;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.fd-skin .password-toast-body {
  padding: var(--space-md);
}

.fd-skin .password-requirements-toast .requirement-item,
.fd-skin .password-requirements-toast .requirement-item .requirement-icon {
  transition: all var(--transition-fast);
}

.fd-skin .password-toggle-icon {
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.fd-skin .password-toggle-icon:hover {
  color: var(--interactive-primary);
}

/* Order form pages (fd-order-add, fd-order-edit) */
.fd-order-add-main,
.fd-order-edit-main,
.fd-order-detail-main,
.fd-skin .fd-form-page-main {
  padding-bottom: var(--space-2xl);
}

/* Simple FD add/edit form pages — same shell rhythm as order-add panels */
.fd-skin .fd-form-page-main .fd-form-page-shell-card {
  margin-top: 0;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.fd-skin .fd-form-page-main .fd-form-page-body,
.fd-skin .fd-form-page-body--in-tab {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-sm);
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x) var(--content-card-body-pad-bottom);
}

.fd-skin .fd-form-page-main .fd-form-page-columns,
.fd-skin .fd-form-page-body--in-tab .fd-form-page-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--layout-gap-sm);
}

@media (min-width: 992px) {
  .fd-skin .fd-form-page-main .fd-form-page-columns--2,
  .fd-skin .fd-form-page-body--in-tab .fd-form-page-columns--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.fd-skin .fd-form-page-main .fd-form-page-footer,
.fd-skin .tab-pane .fd-form-page-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: flex-end;
}

.fd-skin .fd-form-page-main .fd-form-page-footer .fd-btn.fd-btn-primary:disabled,
.fd-skin .fd-form-page-main .fd-form-page-footer .fd-btn.fd-btn-primary[disabled] {
  opacity: 1;
  background-color: var(--form-action-disabled-bg);
  border-color: var(--form-action-disabled-border);
  color: var(--form-action-disabled-color);
  box-shadow: none;
}

.fd-skin .fd-form-page-main .fd-form-page-hint {
  margin: 0;
}

.fd-order-add-main .border-primary,
.fd-order-edit-main .border-primary {
  border-color: var(--border-primary) !important;
}

.fd-order-add-map,
.fd-order-edit-map {
  min-height: 300px;
  border-radius: var(--form-group-panel-radius);
  overflow: hidden;
  background: var(--bg-secondary);
  flex: 1;
  position: relative;
}

/* fd-select-placeholder — JS hook only (see fd-layout.js) */

/* FORM-022 — stacked field row gap (one owner; never margin + container gap) */
.fd-skin .fd-form-field-stack {
  display: flex;
  flex-direction: column;
  gap: var(--form-field-stack-gap);
}

.fd-skin .fd-form-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--form-field-stack-gap);
}

@media (max-width: 991px) {
  .fd-skin .fd-form-field-row {
    grid-template-columns: 1fr;
  }
}

/* Gap-owning layouts — suppress per-field margin (would double with gap) */
.fd-skin :is(.fd-form-field-stack, .fd-form-field-row, .fd-form-add-row, .fd-form-group-panel__body, .fd-order-insp-rows)
  > :is(.form-floating.fd-form-field-float, .fd-form-field) {
  margin-bottom: 0 !important;
}

.fd-skin :is(.fd-form-field-stack, .fd-form-field-row, .fd-form-add-row, .fd-order-insp-rows)
  :is(.form-floating.fd-form-field-float, .fd-form-field) {
  margin-bottom: 0 !important;
}

.fd-skin :is(.fd-form-field-stack, .fd-form-field-row, .fd-form-add-row, .fd-form-group-panel__body, .fd-order-insp-rows)
  .fd-form-field > .form-floating.fd-form-field-float,
.fd-skin :is(.fd-form-field-stack, .fd-form-field-row, .fd-form-add-row, .fd-form-group-panel__body, .fd-order-insp-rows)
  .mb-2.form-floating.fd-form-field-float {
  margin-bottom: 0 !important;
}

/* Bootstrap form columns — stack direct child fields with canonical gap */
.fd-skin form .row > [class*="col-"]:has(> .form-floating.fd-form-field-float),
.fd-skin form .row > [class*="col-"]:has(> .fd-form-field) {
  display: flex;
  flex-direction: column;
  gap: var(--form-field-stack-gap);
}

.fd-skin form .row > [class*="col-"]:has(> .form-floating.fd-form-field-float)
  > .form-floating.fd-form-field-float,
.fd-skin form .row > [class*="col-"]:has(> .fd-form-field) > .fd-form-field,
.fd-skin form .row > [class*="col-"]:has(> .fd-form-field)
  .fd-form-field > .form-floating.fd-form-field-float,
.fd-skin form .row > [class*="col-"]:has(> .form-floating.fd-form-field-float)
  > .mb-2.form-floating.fd-form-field-float {
  margin-bottom: 0 !important;
}

/* ========================================
   PULSE .fd-form-field-float — F1/F2 page + filter card fields
   ======================================== */

.fd-skin .form-floating.fd-form-field-float {
  position: relative;
}

/* Footnotes/errors sit in .fd-form-field — keep float box at control height (not textarea) */
.fd-skin .form-floating.fd-form-field-float:not(:has(> textarea.form-control)) {
  min-height: var(--form-float-field-height);
}

/* Reset Bootstrap form-floating label — Pulse default is centred idle */
.fd-skin .form-floating.fd-form-field-float > label {
  position: absolute;
  top: 50%;
  left: var(--form-float-label-inset-x);
  right: auto;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  transform: translateY(-50%);
  transform-origin: left center;
  pointer-events: none;
  line-height: 1;
  z-index: 1;
  color: var(--form-label-idle-color);
  font-size: var(--form-label-idle-size);
  font-weight: var(--form-label-idle-weight);
  transition:
    top 0.15s ease,
    transform 0.15s ease,
    font-size 0.15s ease,
    color 0.15s ease,
    font-weight 0.15s ease;
}

.fd-skin .form-floating.fd-form-field-float > label::before,
.fd-skin .form-floating.fd-form-field-float > label::after {
  display: none !important;
  content: none !important;
}

/* Floated label — value set (.is-filled) or field focused */
.fd-skin .form-floating.fd-form-field-float.is-filled > label,
.fd-skin .form-floating.fd-form-field-float:focus-within > label {
  top: var(--form-float-label-top);
  transform: translateY(0);
  color: var(--form-label-floated-color);
  font-size: var(--form-label-floated-size);
  font-weight: var(--form-label-floated-weight);
}

/* Pulse text inputs + date — fixed single-line height */
.fd-skin .form-floating.fd-form-field-float > input.form-control {
  box-sizing: border-box;
  height: var(--form-float-field-height);
  min-height: var(--form-float-field-height);
  padding:
    var(--form-float-value-padding-top)
    var(--inset-lg)
    var(--form-float-value-padding-bottom)
    var(--form-float-label-inset-x);
  border: 1px solid var(--border-primary);
  border-radius: var(--form-field-radius);
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  font-size: var(--form-field-font-size);
  font-weight: var(--font-weight-normal);
  font-family: var(--font-family-primary);
  line-height: var(--form-float-value-row-height);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    color var(--transition-fast),
    font-weight var(--transition-fast);
}

/* Textarea — grows vertically; do not lock to single-line height */
.fd-skin .form-floating.fd-form-field-float > textarea.form-control {
  box-sizing: border-box;
  min-height: var(--form-float-field-height);
  padding:
    var(--form-float-value-padding-top)
    var(--inset-lg)
    var(--form-float-value-padding-bottom)
    var(--form-float-label-inset-x);
  border: 1px solid var(--border-primary);
  border-radius: var(--form-field-radius);
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  font-size: var(--form-field-font-size);
  font-weight: var(--font-weight-normal);
  font-family: var(--font-family-primary);
  line-height: var(--form-float-value-row-height);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    color var(--transition-fast),
    font-weight var(--transition-fast);
}

/* Read-only display — same floating shell as inputs (view/detail, not editable) */
.fd-skin .form-floating.fd-form-field-float > .fd-form-field-display.form-control {
  box-sizing: border-box;
  height: auto;
  min-height: var(--form-float-field-height);
  padding:
    var(--form-float-value-padding-top)
    var(--inset-lg)
    var(--form-float-value-padding-bottom)
    var(--form-float-label-inset-x);
  border: 1px solid var(--border-primary);
  border-radius: var(--form-field-radius);
  background-color: var(--bg-primary);
  color: var(--form-field-value-color);
  font-size: var(--form-field-font-size);
  font-weight: var(--form-field-value-weight);
  font-family: var(--font-family-primary);
  line-height: var(--form-float-value-row-height);
  cursor: default;
  overflow: hidden;
}

.fd-skin .form-floating.fd-form-field-float > .fd-form-field-display--multiline.form-control {
  min-height: var(--form-float-field-height);
  height: auto;
}

.fd-skin .form-floating.fd-form-field-float.fd-form-field-float--display:not(:has(> .fd-form-field-display--multiline)) {
  min-height: var(--form-float-field-height);
}

.fd-skin .form-floating.fd-form-field-float.fd-form-field-float--display:has(> .fd-form-field-display--multiline) {
  min-height: auto;
}

.fd-form-field-display__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}

.fd-form-field-display__line {
  font-size: var(--form-field-font-size);
  font-weight: var(--form-field-value-weight);
  color: var(--form-field-value-color);
  line-height: var(--line-height-normal);
}

.fd-form-field-display__line--muted {
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
}

.fd-form-field-display__line--empty {
  color: var(--form-preview-placeholder-color);
  font-weight: var(--font-weight-normal);
}

/* Pulse select — fixed height + shifted padding: browsers centre option text in the inner box */
.fd-skin .form-floating.fd-form-field-float > .form-select {
  box-sizing: border-box;
  height: var(--form-float-field-height);
  min-height: var(--form-float-field-height);
  padding:
    var(--form-float-select-padding-top)
    var(--form-float-select-chevron-inset)
    var(--form-float-select-padding-bottom)
    var(--form-float-label-inset-x);
  border: 1px solid var(--border-primary);
  border-radius: var(--form-field-radius);
  background-color: var(--bg-primary);
  background-position: right var(--inset-md) center;
  background-size: 16px 12px;
  -webkit-appearance: none;
  appearance: none;
  color: var(--text-secondary);
  font-size: var(--form-field-font-size);
  font-weight: var(--font-weight-normal);
  font-family: var(--font-family-primary);
  line-height: var(--form-float-select-line-height);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    color var(--transition-fast),
    font-weight var(--transition-fast);
}

/* Pulse empty select — hide placeholder option text (label is the hint) */
.fd-skin .form-floating.fd-form-field-float > .form-select.fd-select-placeholder:not(:focus),
.fd-skin .form-floating.fd-form-field-float > .form-select:has(option[value=""]:checked):not(:focus) {
  color: transparent;
  font-weight: var(--font-weight-normal);
  -webkit-text-fill-color: transparent;
}

/* Empty select — keep floating label visible (enabled + disabled; Pulse idle state) */
.fd-skin .form-floating.fd-form-field-float:not(.is-filled):not(:focus-within) > .form-select ~ label {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2;
  top: 50%;
  left: var(--form-float-label-inset-x);
  transform: translateY(-50%) !important;
  color: var(--form-label-idle-color);
  font-size: var(--form-label-idle-size);
  font-weight: var(--form-label-idle-weight);
}

.fd-skin .form-floating.fd-form-field-float:not(.is-filled) > .form-select:disabled {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 1;
  background-color: var(--form-field-disabled-bg) !important;
  border-color: var(--form-field-disabled-border) !important;
  cursor: not-allowed;
}

/* Pulse idle — Bootstrap form-floating must not own label position or padding
   (url/email/time types ignore placeholder; .form-select~label always floats in BS) */
.fd-skin .form-floating.fd-form-field-float:not(.is-filled):not(:focus-within) > label {
  top: 50%;
  left: var(--form-float-label-inset-x);
  transform: translateY(-50%);
  color: var(--form-label-idle-color);
  font-size: var(--form-label-idle-size);
  font-weight: var(--form-label-idle-weight);
}

.fd-skin .form-floating.fd-form-field-float:not(.is-filled):not(:focus-within) > input.form-control,
.fd-skin .form-floating.fd-form-field-float:not(.is-filled):not(:focus-within) > textarea.form-control {
  padding:
    var(--form-float-value-padding-top)
    var(--inset-lg)
    var(--form-float-value-padding-bottom)
    var(--form-float-label-inset-x);
}

.fd-skin .form-floating.fd-form-field-float:not(.is-filled):not(:focus-within) > .form-select {
  padding:
    var(--form-float-select-padding-top)
    var(--form-float-select-chevron-inset)
    var(--form-float-select-padding-bottom)
    var(--form-float-label-inset-x);
}

.fd-skin .form-floating.fd-form-field-float--date:not(.is-filled):not(:focus-within) > input[type="date"],
.fd-skin .form-floating.fd-form-field-float--time:not(.is-filled):not(:focus-within) > input[type="time"] {
  padding-right: 2.25rem;
}

/* Pulse filled value typography */
.fd-skin .form-floating.fd-form-field-float.is-filled > .form-control,
.fd-skin .form-floating.fd-form-field-float.is-filled > .form-select,
.fd-skin .form-floating.fd-form-field-float.is-filled > textarea.form-control,
.fd-skin .form-floating.fd-form-field-float:focus-within > .form-control,
.fd-skin .form-floating.fd-form-field-float:focus-within > .form-select,
.fd-skin .form-floating.fd-form-field-float:focus-within > textarea.form-control {
  color: var(--form-field-value-color);
  font-weight: var(--form-field-value-weight);
  -webkit-text-fill-color: var(--form-field-value-color);
}

/* Date — Pulse calendar field: custom icon, native picker overlay, value-row alignment */
.fd-skin .fd-form-field-float--date > input[type="date"],
.fd-skin .fd-form-field-float--date > .form-control[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  position: relative;
  background-color: var(--bg-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2396a0af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
}

/* Pulse date — hide native dd/mm/yyyy by default; show only when value set or picker open */
.fd-skin .fd-form-field-float--date > input[type="date"]::-webkit-datetime-edit,
.fd-skin .fd-form-field-float--date > input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.fd-skin .fd-form-field-float--date > input[type="date"]::-webkit-datetime-edit-text,
.fd-skin .fd-form-field-float--date > input[type="date"]::-webkit-datetime-edit-month-field,
.fd-skin .fd-form-field-float--date > input[type="date"]::-webkit-datetime-edit-day-field,
.fd-skin .fd-form-field-float--date > input[type="date"]::-webkit-datetime-edit-year-field {
  opacity: 0;
}

.fd-skin .form-floating.fd-form-field-float--date[data-fd-has-value="true"] > input[type="date"]::-webkit-datetime-edit,
.fd-skin .form-floating.fd-form-field-float--date[data-fd-has-value="true"] > input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.fd-skin .form-floating.fd-form-field-float--date[data-fd-has-value="true"] > input[type="date"]::-webkit-datetime-edit-text,
.fd-skin .form-floating.fd-form-field-float--date[data-fd-has-value="true"] > input[type="date"]::-webkit-datetime-edit-month-field,
.fd-skin .form-floating.fd-form-field-float--date[data-fd-has-value="true"] > input[type="date"]::-webkit-datetime-edit-day-field,
.fd-skin .form-floating.fd-form-field-float--date[data-fd-has-value="true"] > input[type="date"]::-webkit-datetime-edit-year-field,
.fd-skin .form-floating.fd-form-field-float--date:focus-within > input[type="date"]::-webkit-datetime-edit,
.fd-skin .form-floating.fd-form-field-float--date:focus-within > input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.fd-skin .form-floating.fd-form-field-float--date:focus-within > input[type="date"]::-webkit-datetime-edit-text,
.fd-skin .form-floating.fd-form-field-float--date:focus-within > input[type="date"]::-webkit-datetime-edit-month-field,
.fd-skin .form-floating.fd-form-field-float--date:focus-within > input[type="date"]::-webkit-datetime-edit-day-field,
.fd-skin .form-floating.fd-form-field-float--date:focus-within > input[type="date"]::-webkit-datetime-edit-year-field {
  opacity: 1;
  color: var(--form-field-value-color);
  font-weight: var(--form-field-value-weight);
  -webkit-text-fill-color: var(--form-field-value-color);
}

.fd-skin .form-floating.fd-form-field-float--date:not([data-fd-has-value="true"]):not(:focus-within) > input[type="date"],
.fd-skin .form-floating.fd-form-field-float--date:not([data-fd-has-value="true"]):not(:focus-within) > .form-control[type="date"] {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Align date value with text/select value row */
.fd-skin .fd-form-field-float--date > input[type="date"]::-webkit-date-and-time-value,
.fd-skin .fd-form-field-float--date > .form-control[type="date"]::-webkit-date-and-time-value {
  height: var(--form-float-value-row-height);
  line-height: var(--form-float-value-row-height);
  text-align: left;
  margin: 0;
  padding: 0;
}

.fd-skin .form-floating.fd-form-field-float--date[data-fd-has-value="true"] > input[type="date"],
.fd-skin .form-floating.fd-form-field-float--date[data-fd-has-value="true"] > .form-control[type="date"],
.fd-skin .form-floating.fd-form-field-float--date:focus-within > input[type="date"],
.fd-skin .form-floating.fd-form-field-float--date:focus-within > .form-control[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737b8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.fd-skin .fd-form-field-float--date > input[type="date"]::-webkit-calendar-picker-indicator,
.fd-skin .fd-form-field-float--date > .form-control[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.fd-skin .fd-form-field-float--date > input[type="date"]::-moz-calendar-picker-indicator,
.fd-skin .fd-form-field-float--date > .form-control[type="date"]::-moz-calendar-picker-indicator {
  opacity: 0;
  width: 100%;
  height: 100%;
}

/* Time — Pulse clock field: custom icon, native picker overlay, value-row alignment */
.fd-skin .fd-form-field-float--time > input[type="time"],
.fd-skin .fd-form-field-float--time > .form-control[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  position: relative;
  background-color: var(--bg-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2396a0af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
}

/* Pulse time — hide native --:-- by default; show only when value set or picker open */
.fd-skin .fd-form-field-float--time > input[type="time"]::-webkit-datetime-edit,
.fd-skin .fd-form-field-float--time > input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.fd-skin .fd-form-field-float--time > input[type="time"]::-webkit-datetime-edit-text,
.fd-skin .fd-form-field-float--time > input[type="time"]::-webkit-datetime-edit-hour-field,
.fd-skin .fd-form-field-float--time > input[type="time"]::-webkit-datetime-edit-minute-field,
.fd-skin .fd-form-field-float--time > input[type="time"]::-webkit-datetime-edit-second-field,
.fd-skin .fd-form-field-float--time > input[type="time"]::-webkit-datetime-edit-ampm-field {
  opacity: 0;
}

.fd-skin .form-floating.fd-form-field-float--time[data-fd-has-value="true"] > input[type="time"]::-webkit-datetime-edit,
.fd-skin .form-floating.fd-form-field-float--time[data-fd-has-value="true"] > input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.fd-skin .form-floating.fd-form-field-float--time[data-fd-has-value="true"] > input[type="time"]::-webkit-datetime-edit-text,
.fd-skin .form-floating.fd-form-field-float--time[data-fd-has-value="true"] > input[type="time"]::-webkit-datetime-edit-hour-field,
.fd-skin .form-floating.fd-form-field-float--time[data-fd-has-value="true"] > input[type="time"]::-webkit-datetime-edit-minute-field,
.fd-skin .form-floating.fd-form-field-float--time[data-fd-has-value="true"] > input[type="time"]::-webkit-datetime-edit-second-field,
.fd-skin .form-floating.fd-form-field-float--time[data-fd-has-value="true"] > input[type="time"]::-webkit-datetime-edit-ampm-field,
.fd-skin .form-floating.fd-form-field-float--time:focus-within > input[type="time"]::-webkit-datetime-edit,
.fd-skin .form-floating.fd-form-field-float--time:focus-within > input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.fd-skin .form-floating.fd-form-field-float--time:focus-within > input[type="time"]::-webkit-datetime-edit-text,
.fd-skin .form-floating.fd-form-field-float--time:focus-within > input[type="time"]::-webkit-datetime-edit-hour-field,
.fd-skin .form-floating.fd-form-field-float--time:focus-within > input[type="time"]::-webkit-datetime-edit-minute-field,
.fd-skin .form-floating.fd-form-field-float--time:focus-within > input[type="time"]::-webkit-datetime-edit-second-field,
.fd-skin .form-floating.fd-form-field-float--time:focus-within > input[type="time"]::-webkit-datetime-edit-ampm-field {
  opacity: 1;
  color: var(--form-field-value-color);
  font-weight: var(--form-field-value-weight);
  -webkit-text-fill-color: var(--form-field-value-color);
}

.fd-skin .form-floating.fd-form-field-float--time:not([data-fd-has-value="true"]):not(:focus-within) > input[type="time"],
.fd-skin .form-floating.fd-form-field-float--time:not([data-fd-has-value="true"]):not(:focus-within) > .form-control[type="time"] {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fd-skin .fd-form-field-float--time > input[type="time"]::-webkit-date-and-time-value,
.fd-skin .fd-form-field-float--time > .form-control[type="time"]::-webkit-date-and-time-value {
  height: var(--form-float-value-row-height);
  line-height: var(--form-float-value-row-height);
  text-align: left;
  margin: 0;
  padding: 0;
}

.fd-skin .form-floating.fd-form-field-float--time[data-fd-has-value="true"] > input[type="time"],
.fd-skin .form-floating.fd-form-field-float--time[data-fd-has-value="true"] > .form-control[type="time"],
.fd-skin .form-floating.fd-form-field-float--time:focus-within > input[type="time"],
.fd-skin .form-floating.fd-form-field-float--time:focus-within > .form-control[type="time"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737b8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

.fd-skin .fd-form-field-float--time > input[type="time"]::-webkit-calendar-picker-indicator,
.fd-skin .fd-form-field-float--time > .form-control[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.fd-skin .fd-form-field-float--time > input[type="time"]::-moz-calendar-picker-indicator,
.fd-skin .fd-form-field-float--time > .form-control[type="time"]::-moz-calendar-picker-indicator {
  opacity: 0;
  width: 100%;
  height: 100%;
}

.fd-skin .form-floating.fd-form-field-float:focus-within > .form-control,
.fd-skin .form-floating.fd-form-field-float:focus-within > .form-select,
.fd-skin .form-floating.fd-form-field-float:focus-within > textarea.form-control {
  border-color: var(--interactive-primary);
  box-shadow: var(--shadow-focus);
  outline: 0;
}

/* Optional footnote below float field (dependency hints, e.g. "Select builder first")
   Pulse rule: same horizontal inset as field value text (--form-float-label-inset-x) */
.fd-skin .fd-field-hint {
  padding-inline: var(--form-float-label-inset-x);
}

.fd-skin .fd-form-field--with-hint .fd-field-hint {
  display: none;
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}

.fd-skin .fd-form-field--with-hint.is-dependency-locked .fd-field-hint {
  display: block;
}

/* F3 — Toolbar / drawer compact controls (not Pulse float) */
.fd-skin .form-floating .form-control-sm,
.fd-skin .form-floating .form-select-sm,
.fd-skin .fd-main-content .form-control-sm,
.fd-skin .fd-main-content .form-select-sm {
  border: 1px solid var(--border-primary);
  border-radius: var(--form-field-radius);
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  font-size: var(--form-field-font-size);
  font-weight: var(--font-weight-normal);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    color var(--transition-fast),
    font-weight var(--transition-fast);
}

.fd-skin .form-floating .form-control-sm:focus,
.fd-skin .form-floating .form-control-sm:not(:placeholder-shown),
.fd-skin .form-floating .form-control-sm:not(:-moz-placeholder-shown),
.fd-skin .form-floating .form-select-sm:not(.fd-select-placeholder),
.fd-skin .form-floating .form-select-sm:not(:has(option[value=""]:checked)),
.fd-skin .fd-main-content .form-control-sm:focus,
.fd-skin .fd-main-content .form-control-sm:not(:placeholder-shown),
.fd-skin .fd-main-content .form-select-sm:not(.fd-select-placeholder),
.fd-skin .fd-main-content .form-select-sm:not(:has(option[value=""]:checked)) {
  color: var(--form-field-value-color);
  font-weight: var(--form-field-value-weight);
  -webkit-text-fill-color: var(--form-field-value-color);
}

.fd-skin .form-floating .form-control-sm:focus,
.fd-skin .form-floating .form-select-sm:focus,
.fd-skin .fd-main-content .form-control-sm:focus,
.fd-skin .fd-main-content .form-select-sm:focus {
  border-color: var(--interactive-primary);
  box-shadow: var(--shadow-focus);
  outline: 0;
}

/* Inspector dropdown search input — compact field (calendar filter panel) */
.fd-skin .fd-inspector-dropdown li:first-child input,
.fd-skin .fd-inspector-dropdown li:first-child input[type="text"],
.fd-skin .fd-inspector-dropdown li:first-child input.form-control,
.fd-skin .fd-inspector-dropdown li:first-child input.form-control-sm,
.fd-skin .fd-inspector-dropdown li:first-child #searchInput {
  border: 1px solid var(--border-primary);
  border-radius: var(--form-field-radius);
  font-size: var(--form-field-font-size);
  font-family: var(--font-family-primary);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: 1.5;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.fd-skin .fd-inspector-dropdown li:first-child input:focus,
.fd-skin .fd-inspector-dropdown li:first-child input[type="text"]:focus,
.fd-skin .fd-inspector-dropdown li:first-child input.form-control:focus,
.fd-skin .fd-inspector-dropdown li:first-child input.form-control-sm:focus,
.fd-skin .fd-inspector-dropdown li:first-child #searchInput:focus {
  outline: none;
  border-color: var(--interactive-primary);
  box-shadow: var(--shadow-focus-sm);
  color: var(--text-primary);
  background-color: var(--bg-primary);
}
/* FD form add-row: horizontal form-floating fields + Add button (Contact/Inspection tabs) */
.fd-form-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--inset-md);
  margin-bottom: var(--inset-md);
}

/* Variant: vertically center contents in add-row (used on fd-order-add inspections row) */
.fd-form-add-row--center {
  align-items: center !important;
}

.fd-form-add-row .form-floating {
  min-width: 140px;
}

.fd-form-add-row .form-floating.fd-form-field-wide {
  min-width: 200px;
  max-width: 280px;
}

/* Form-floating: hide select placeholder option text when empty to avoid label + option overlap
   (used mainly in tight add-row layouts) */
.fd-form-add-row .form-floating.fd-form-field-float .form-select option[value=""] {
  color: transparent;
}

/* ========================================
   CONTEXT MODIFIERS (F1–F5) — FORM-012/030/031/032
   ======================================== */

/* F2 — Filter card: inherits base float; grid min-height in fd-list-pages.css */
.fd-skin .fd-form-field--filter {
  width: 100%;
}

/* F3 — Toolbar / compact date-range chips */
.fd-skin .fd-form-field--compact .form-control-sm,
.fd-skin .fd-form-field--compact .form-select-sm,
.fd-skin .fd-form-field--compact input.form-control {
  min-height: calc(2.25rem + 2px);
}

.fd-skin .fd-date-range-field.fd-form-field--compact .fd-date-range-label {
  font-size: var(--form-hint-size);
  color: var(--text-tertiary);
  margin-bottom: var(--inset-xs);
}

/* F4 — Mobile filter drawer */
.fd-skin .fd-form-field--drawer .form-select-sm {
  width: 100%;
}

.fd-skin .fd-form-field--drawer .fd-date-range-mobile .form-label {
  font-size: var(--form-static-label-size);
  font-weight: var(--form-static-label-weight);
  color: var(--form-static-label-color);
}

/* Mobile form font-size — moved from fd-layout.css (FORM-012) */
@media (max-width: 575.98px) {
  .fd-skin .form-floating.fd-form-field-float > .form-control,
  .fd-skin .form-floating.fd-form-field-float > .form-select {
    font-size: var(--nav-arrow-size) !important;
  }
}

/* ========================================
   FORM-060 — checkbox/radio macros (checkbox-wrapper-13 shell)
   Base checkbox chrome remains in fd-components.css
   ======================================== */

.fd-doc-type-radios {
  display: flex;
  flex-direction: column;
  gap: var(--inset-xs);
}

.fd-doc-type-radios .checkbox-wrapper-13 {
  margin-bottom: 0;
}

/* Radio variant — circle affordance matching checkbox-wrapper-13 tokens */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .fd-skin .checkbox-wrapper-13 input[type="radio"] {
    --active: var(--interactive-primary);
    --active-inner: var(--color-white);
    --focus: 2px rgba(63, 169, 245, 0.3);
    --border: var(--border-primary);
    --border-hover: var(--interactive-primary);
    --background: var(--bg-primary);
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    cursor: pointer;
    position: relative;
    margin: 0;
    vertical-align: top;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }

  .fd-skin .checkbox-wrapper-13 input[type="radio"]:checked {
    --b: var(--active);
    --bc: var(--active);
    border-color: var(--active);
    background: var(--active);
  }

  .fd-skin .checkbox-wrapper-13 input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--active-inner);
  }

  .fd-skin .checkbox-wrapper-13 input[type="radio"]:focus {
    box-shadow: 0 0 0 var(--focus);
    outline: 0;
  }

  .fd-skin .checkbox-wrapper-13 input[type="radio"]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
}

.fd-skin .checkbox-wrapper-13 input[type="radio"] + label {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  margin-left: 4px;
  font-size: var(--form-field-font-size);
  color: var(--text-primary);
}

/* Inspector dropdown inline checkboxes */
.fd-skin .fd-inspector-dropdown .checkbox-wrapper-13 input[type="checkbox"] {
  flex-shrink: 0;
}

.fd-skin .fd-inspector-dropdown .fd-inspector-item > label.checkbox-wrapper-13 {
  width: 100%;
  cursor: pointer;
}