/* Form Panel component ([lpos_form], includes/Components/FormPanel.php) -- a token-driven forms
   + fields kit matching the console HUD glass language (.lpos-c-subpanel / .lpos-c-icon-btn /
   the archive card recipe). 100% var(--lpos-*)-referenced; every fallback equals that token's
   canon :where(:root) value in assets/css/console-tokens.css. No raw hex/px/rgba outside var()/
   calc(). NO-SCROLLBAR LAW: the outer wrapper is overflow:hidden and the field grid uses a
   container query (container-type: inline-size) to add a second column as its panel widens,
   instead of ever growing a scrollbar. */

.lpos-c-form {
  container-type: inline-size;
  container-name: lposform;
  display: flex;
  flex-direction: column;
  gap: var(--lpos-gap, 12px);
  height: 100%;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  font-family: var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
}

/* ---- head: title panel (reuses .lpos-c-title-panel chrome) + the live "saved" status line ---- */
.lpos-c-form__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lpos-gap, 12px);
  min-width: 0;
}
.lpos-c-form__title { flex: 1 1 auto; min-width: 0; margin: 0; }
/* HONESTY (2026-08-10): stand-in-content chip, same recipe as .lpos-c-chart__sample. */
.lpos-c-form__sample {
  flex: 0 0 auto;
  font: 600 var(--lpos-text-2xs, 12px) / 1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  letter-spacing: var(--lpos-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--lpos-muted, #A8B2C7);
  padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
  border: var(--lpos-border-width, 1px) dashed color-mix(in srgb, var(--lpos-muted, #A8B2C7) var(--lpos-border-alpha-2, 40%), transparent);
  border-radius: var(--lpos-radius-sm, 4px);
}
.lpos-c-form__status {
  flex: 0 0 auto;
  margin: 0;
  font: 600 var(--lpos-text-xs, 13px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  /* BRAND-ONLY (2026-08-03): was --lpos-good (literal green) -- the "saved" confirmation reads in
     the tenant's own accent instead of an off-brand success hue. */
  color: var(--lpos-accent, #00D4FF);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--lpos-duration-reveal, 180ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1)),
              transform var(--lpos-duration-reveal, 180ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1));
  white-space: nowrap;
}
.lpos-c-form__status.-visible { opacity: 1; transform: translateY(0); }

/* ---- the scrollable-avoiding body: fields + toggles + radios + actions, all fluid ---- */
.lpos-c-form__form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lpos-gap, 12px);
  overflow: hidden;
}

/* ---- field grid: one column by default, two once the panel is wide enough (container query,
   not a viewport media query -- the component adapts to ITS panel, per the responsive law). ---- */
.lpos-c-form__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lpos-space-md, 12px) var(--lpos-gap, 12px);
  min-height: 0;
}
@container lposform (min-width: 520px) {
  .lpos-c-form__fields { grid-template-columns: 1fr 1fr; }
  .lpos-c-field--full { grid-column: 1 / -1; }
}

.lpos-c-field {
  display: flex;
  flex-direction: column;
  gap: var(--lpos-space-xs, 4px);
  min-width: 0;
}
.lpos-c-field__label {
  font: 600 var(--lpos-text-xs, 13px)/1.2 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-muted, #A8B2C7);
  letter-spacing: var(--lpos-tracking-label, 0.08em);
  text-transform: uppercase;
}

/* control shell: same glass-panel + accent hairline recipe as .lpos-search / .lpos-c-subpanel */
.lpos-c-field__control {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  /* glass fill: console-tokens.css (one canonical rule) */
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-2, 40%), transparent);
  border-radius: var(--lpos-radius-control, 8px);
  box-sizing: border-box;
  transition: border-color var(--lpos-duration-fast, 120ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow var(--lpos-duration-fast, 120ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1));
}
.lpos-c-field__control:focus-within {
  border-color: var(--lpos-accent, #00D4FF);
}
.lpos-c-field__input {
  all: unset;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--lpos-control-size, 46px);
  padding: 0 var(--lpos-space-sm, 8px);
  font: 500 var(--lpos-text-sm, 14px)/1.2 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
}
.lpos-c-field__input::placeholder { color: var(--lpos-muted, #A8B2C7); }

/* textarea: fixed rhythm height (rows=3), fills the control, own vertical padding */
.lpos-c-field__control--textarea { height: auto; }
.lpos-c-field__textarea {
  height: auto;
  min-height: calc(var(--lpos-control-size, 46px) * 1.6);
  padding: var(--lpos-space-sm, 8px);
  resize: none;
  line-height: 1.5;
}

/* select: native control, custom chevron overlay (pointer-events:none so clicks reach the select) */
.lpos-c-field__control--select { align-items: center; }
.lpos-c-field__select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding-right: calc(var(--lpos-space-md, 12px) + var(--lpos-icon-size-xs, 20px));
  cursor: pointer;
}
.lpos-c-field__select option { color: var(--lpos-ink-inverted, #0A0E17); background: var(--lpos-panel, #0D111C); }
.lpos-c-field__chevron {
  position: absolute;
  right: var(--lpos-space-sm, 8px);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--lpos-muted, #A8B2C7);
}
.lpos-c-field__chevron svg {
  width: var(--lpos-icon-size-xs, 20px);
  height: var(--lpos-icon-size-xs, 20px);
  fill: none;
  stroke: currentColor;
}

/* inline validation hint */
.lpos-c-field__hint {
  font: 500 var(--lpos-text-xs, 13px)/1.3 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-muted, #A8B2C7);
}
/* BRAND-ONLY (2026-08-03): error/success are told apart by border STYLE + accent intensity, never
   red/green literals -- error dashes to a muted (inactive-reading) hairline, success solidifies to
   the tenant's own full accent (the same "lit up" signal the icon-btn active/pressed state uses). */
.lpos-c-field.-error .lpos-c-field__control {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--lpos-muted) var(--lpos-border-alpha-3, 55%), transparent);
}
.lpos-c-field.-error .lpos-c-field__control:focus-within { border-color: var(--lpos-muted, #A8B2C7); }
.lpos-c-field.-error .lpos-c-field__hint { color: var(--lpos-muted, #A8B2C7); font-weight: 700; }
.lpos-c-field.-success .lpos-c-field__control {
  border-color: color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-3, 55%), transparent);
}
.lpos-c-field.-success .lpos-c-field__control:focus-within { border-color: var(--lpos-accent, #00D4FF); }
.lpos-c-field.-success .lpos-c-field__hint { color: var(--lpos-accent, #00D4FF); }

/* ---- toggles row: 2FA switch + checkbox, side by side once room allows ---- */
.lpos-c-form__toggles {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--lpos-space-md, 12px);
}
@container lposform (min-width: 520px) {
  .lpos-c-form__toggles { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .lpos-c-form__toggles > * { flex: 1 1 0; min-width: 0; }
}

.lpos-c-toggle {
  display: flex;
  align-items: center;
  gap: var(--lpos-space-md, 12px);
  min-width: 0;
  padding: var(--lpos-subpanel-pad, 6px) var(--lpos-space-md, 12px);
  background: var(--lpos-glass-1, rgba(255,255,255,0.035));
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-1, 30%), transparent);
  border-radius: var(--lpos-radius-control, 8px);
  box-sizing: border-box;
}
.lpos-c-toggle__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--lpos-space-xs, 4px); }
.lpos-c-toggle__label { font: 600 var(--lpos-text-sm, 14px)/1.2 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif); color: var(--lpos-ink, #EAF2FB); }
.lpos-c-toggle__desc { font: 400 var(--lpos-text-xs, 13px)/1.3 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif); color: var(--lpos-muted, #A8B2C7); }

.lpos-c-toggle__switch {
  all: unset;
  box-sizing: border-box;
  flex: 0 0 auto;
  cursor: pointer;
  position: relative;
  width: calc(var(--lpos-control-size, 46px) * 0.95);
  height: calc(var(--lpos-control-size, 46px) * 0.5);
  padding: var(--lpos-space-xs, 4px);
  background: var(--lpos-glass-2, rgba(255,255,255,0.055));
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-2, 40%), transparent);
  border-radius: calc(var(--lpos-control-size, 46px) * 0.5);
  transition: background var(--lpos-duration-fast, 120ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color var(--lpos-duration-fast, 120ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1));
}
.lpos-c-toggle__switch:focus-visible {
  outline: none;
  box-shadow: var(--lpos-focus-ring, 0 0 0 2px rgba(0,212,255,.9), 0 0 12px rgba(0,212,255,.6));
}
.lpos-c-toggle__thumb {
  display: block;
  width: calc(var(--lpos-control-size, 46px) * 0.38);
  height: calc(var(--lpos-control-size, 46px) * 0.38);
  border-radius: 50%;
  background: var(--lpos-muted, #A8B2C7);
  transition: transform var(--lpos-duration-fast, 120ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1)),
              background var(--lpos-duration-fast, 120ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1));
}
.lpos-c-toggle__switch.-on {
  background: var(--lpos-accent, #00D4FF);
  border-color: var(--lpos-accent, #00D4FF);
}
.lpos-c-toggle__switch.-on .lpos-c-toggle__thumb {
  background: var(--lpos-ink-inverted, #0A0E17);
  transform: translateX(calc(var(--lpos-control-size, 46px) * 0.45));
}

/* ---- checkbox: native input, colored via accent-color only (real semantics preserved) ---- */
.lpos-c-checkbox {
  display: flex;
  align-items: center;
  gap: var(--lpos-space-sm, 8px);
  min-width: 0;
  padding: var(--lpos-subpanel-pad, 6px) var(--lpos-space-md, 12px);
  background: var(--lpos-glass-1, rgba(255,255,255,0.035));
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-1, 30%), transparent);
  border-radius: var(--lpos-radius-control, 8px);
  box-sizing: border-box;
  cursor: pointer;
}
.lpos-c-checkbox__input {
  flex: 0 0 auto;
  width: var(--lpos-icon-size-sm, 24px);
  height: var(--lpos-icon-size-sm, 24px);
  accent-color: var(--lpos-accent, #00D4FF);
  cursor: pointer;
}
.lpos-c-checkbox__input:focus-visible {
  outline: none;
  box-shadow: var(--lpos-focus-ring, 0 0 0 2px rgba(0,212,255,.9), 0 0 12px rgba(0,212,255,.6));
  border-radius: var(--lpos-radius-sm, 4px);
}
.lpos-c-checkbox__text { font: 600 var(--lpos-text-sm, 14px)/1.3 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif); color: var(--lpos-ink, #EAF2FB); }

/* ---- radio group ---- */
.lpos-c-fieldset {
  all: unset;
  display: flex;
  flex-direction: column;
  gap: var(--lpos-space-sm, 8px);
  min-width: 0;
}
.lpos-c-fieldset__legend {
  font: 600 var(--lpos-text-xs, 13px)/1.2 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-muted, #A8B2C7);
  letter-spacing: var(--lpos-tracking-label, 0.08em);
  text-transform: uppercase;
  padding: 0;
}
.lpos-c-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lpos-space-sm, 8px);
}
.lpos-c-radio {
  display: flex;
  align-items: center;
  gap: var(--lpos-space-xs, 4px);
  padding: var(--lpos-space-xs, 4px) var(--lpos-space-md, 12px);
  height: var(--lpos-control-size, 46px);
  box-sizing: border-box;
  background: var(--lpos-glass-1, rgba(255,255,255,0.035));
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-1, 30%), transparent);
  border-radius: var(--lpos-radius-control, 8px);
  cursor: pointer;
}
.lpos-c-radio__input {
  flex: 0 0 auto;
  width: var(--lpos-icon-size-xs, 20px);
  height: var(--lpos-icon-size-xs, 20px);
  accent-color: var(--lpos-accent, #00D4FF);
  cursor: pointer;
}
.lpos-c-radio__input:focus-visible {
  outline: none;
  box-shadow: var(--lpos-focus-ring, 0 0 0 2px rgba(0,212,255,.9), 0 0 12px rgba(0,212,255,.6));
  border-radius: 50%;
}
.lpos-c-radio__text { font: 500 var(--lpos-text-sm, 14px)/1.2 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif); color: var(--lpos-ink, #EAF2FB); white-space: nowrap; }

/* ---- action row: primary submit + secondary reset, both the canonical icon button in its
   --labeled (auto-width, text child) form. ---- */
/* ---- icon buttons: ONE recipe for chat/form/kanban/calendar now lives in the COMPONENT ICON
   BUTTON block at the end of console-tokens.css (2026-08-10, JD: "make all four match"). This
   sheet's local copy is deleted -- the four had drifted into four different buttons. ---- */
.lpos-c-form__actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--lpos-space-sm, 8px);
  justify-content: flex-end;
}

/* primary submit: solid accent fill -- the same treatment the canon gives an active/pressed
   icon-btn ([aria-pressed="true"] in console-tokens.css), applied via a class since this component
   renders outside the .lpos-blueprint ancestor that rule is scoped to. */
.lpos-c-form .lpos-c-form__btn--primary {
  color: var(--lpos-ink-inverted, #0A0E17);
  background: var(--lpos-accent, #00D4FF);
  border-color: var(--lpos-accent, #00D4FF);
}
.lpos-c-form .lpos-c-form__btn--primary:hover { }
.lpos-c-form .lpos-c-form__btn--primary:disabled { opacity: .6; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .lpos-c-form__status, .lpos-c-toggle__switch, .lpos-c-toggle__thumb, .lpos-c-form .lpos-c-icon-btn, .lpos-c-field__control {
    transition-duration: 0ms !important;
  }
}