/* Creatix Forms 1.0
   One enforced form component system for all Core and module forms.
   Native semantics remain intact; cx classes provide the shared presentation. */

:root{
  --cxForm-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --cxForm-text:#1f2937;
  --cxForm-muted:#667085;
  --cxForm-placeholder:#98a2b3;
  --cxForm-bg:#fff;
  --cxForm-bg-muted:#f3f6f9;
  --cxForm-border:#cfd8e3;
  --cxForm-border-hover:#9fb2c8;
  --cxForm-primary:var(--cx-primary,#3478c8);
  --cxForm-danger:#d92d20;
  --cxForm-success:#16803c;
  --cxForm-warning:#b54708;
  --cxForm-radius:8px;
  --cxForm-height:42px;
  --cxForm-gap:12px;
  --cxForm-focus:0 0 0 3px rgba(52,120,200,.15);
  color-scheme:light;
}

.cxForm,
form.cxForm{
  box-sizing:border-box;
  min-inline-size:0;
  color:var(--cxForm-text);
  font-family:var(--cxForm-font);
}
.cxForm--stack{display:grid;gap:var(--cxForm-gap)}
.cxForm--bare{display:contents}

.cxForm *,
.cxForm *::before,
.cxForm *::after,
.cxInput,
.cxTextarea,
.cxSelect,
.cxButton,
.cxOutput,
.cxFieldset{
  box-sizing:border-box;
}

.cxLabel,
label.cxLabel{
  display:grid;
  gap:6px;
  min-inline-size:0;
  color:#344054;
  font:650 11px/1.35 var(--cxForm-font);
}
.cxLabel--choice{display:inline-flex!important;align-items:center!important;gap:8px!important;font-weight:600!important;cursor:pointer}

.cxFieldset,
fieldset.cxFieldset{
  min-inline-size:0;
  margin:0;
  padding:14px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#fff;
}

.cxLegend,
legend.cxLegend{
  max-inline-size:100%;
  padding-inline:6px;
  color:#344054;
  font:700 12px/1.35 var(--cxForm-font);
}

.cxInput:not(.cxInput--checkbox):not(.cxInput--radio):not(.cxInput--range):not(.cxInput--color):not(.cxInput--file):not(.cxInput--image):not(.cxInput--hidden):not(.cxButton),
.cxTextarea,
.cxSelect,
.cxSelectControl,
.cx-select-button{
  -webkit-appearance:none!important;
  appearance:none!important;
  inline-size:100%;
  min-inline-size:0;
  block-size:var(--cxForm-height);
  margin:0!important;
  padding:0 12px!important;
  border:1px solid var(--cxForm-border)!important;
  border-radius:var(--cxForm-radius)!important;
  background-color:var(--cxForm-bg)!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--cxForm-text)!important;
  -webkit-text-fill-color:var(--cxForm-text)!important;
  caret-color:var(--cxForm-text)!important;
  font:400 13px/1.4 var(--cxForm-font)!important;
  letter-spacing:normal!important;
  text-align:start;
  text-transform:none!important;
  filter:none!important;
  outline:0;
  outline-offset:2px;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
  color-scheme:light!important;
}

.cxTextarea{
  min-block-size:100px;
  block-size:auto;
  padding:10px 12px!important;
  line-height:1.5!important;
  resize:vertical;
}

.cxInput:hover,
.cxTextarea:hover,
.cxSelect:hover,
.cxSelectControl:hover,
.cx-select-button:hover{
  background-color:#fff!important;
  background-image:none!important;
  border-color:var(--cxForm-border-hover)!important;
  color:var(--cxForm-text)!important;
  -webkit-text-fill-color:var(--cxForm-text)!important;
  filter:none!important;
}

.cxInput:focus,
.cxTextarea:focus,
.cxSelect:focus,
.cxSelectControl:focus,
.cx-select-button:focus,
.cxInput:focus-visible,
.cxTextarea:focus-visible,
.cxSelect:focus-visible,
.cxButton:focus-visible,
.cxSelectControl:focus-visible,
.cx-select-button:focus-visible{
  background-color:#fff!important;
  background-image:none!important;
  border-color:var(--cxForm-primary)!important;
  box-shadow:var(--cxForm-focus)!important;
  color:var(--cxForm-text)!important;
  -webkit-text-fill-color:var(--cxForm-text)!important;
  outline:2px solid transparent!important;
  outline-offset:2px!important;
  filter:none!important;
}

.cxForm:focus-within{--cxForm-active:1}

.cxInput:disabled,
.cxTextarea:disabled,
.cxSelect:disabled,
.cxButton:disabled,
.cxFieldset:disabled .cxInput,
.cxFieldset:disabled .cxTextarea,
.cxFieldset:disabled .cxSelect{
  background-color:var(--cxForm-bg-muted)!important;
  border-color:#dfe5ec!important;
  color:#7b8796!important;
  -webkit-text-fill-color:#7b8796!important;
  cursor:not-allowed!important;
  opacity:1!important;
  pointer-events:none;
}

.cxInput[readonly],
.cxTextarea[readonly],
.cxInput:read-only,
.cxTextarea:read-only{
  background-color:var(--cxForm-bg-muted)!important;
  color:#667085!important;
  -webkit-text-fill-color:#667085!important;
  cursor:default;
}

.cxInput:read-write,
.cxTextarea:read-write{cursor:text}
.cxSelect:enabled,.cxButton:enabled{cursor:pointer}

.cxInput::placeholder,
.cxTextarea::placeholder{
  color:var(--cxForm-placeholder)!important;
  -webkit-text-fill-color:var(--cxForm-placeholder)!important;
  opacity:1!important;
}

.cxInput:required,
.cxTextarea:required,
.cxSelect:required{--cxForm-required:1}
.cxInput:optional,
.cxTextarea:optional,
.cxSelect:optional{--cxForm-optional:1}

.cxForm[data-cx-validated="1"] .cxInput:invalid,
.cxForm[data-cx-validated="1"] .cxTextarea:invalid,
.cxForm[data-cx-validated="1"] .cxSelect:invalid,
.cxInput[data-cx-touched="1"]:invalid,
.cxTextarea[data-cx-touched="1"]:invalid,
.cxSelect[data-cx-touched="1"]:invalid{
  border-color:var(--cxForm-danger)!important;
  box-shadow:0 0 0 3px rgba(217,45,32,.12)!important;
}

.cxForm[data-cx-validated="1"] .cxInput:valid:not(:placeholder-shown),
.cxForm[data-cx-validated="1"] .cxTextarea:valid:not(:placeholder-shown),
.cxForm[data-cx-validated="1"] .cxSelect:valid{
  border-color:#86c99c!important;
}

.cxInput:in-range{--cxForm-range-state:in-range}
.cxInput:out-of-range{border-color:var(--cxForm-danger)!important}

.cxInput--checkbox,
.cxInput--radio{
  -webkit-appearance:auto!important;
  appearance:auto!important;
  inline-size:16px!important;
  block-size:16px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--cxForm-border)!important;
  background:#fff!important;
  accent-color:var(--cxForm-primary)!important;
  box-shadow:none!important;
  cursor:pointer;
  vertical-align:middle;
}

.cxInput--checkbox:checked,
.cxInput--radio:checked{accent-color:var(--cxForm-primary)!important}
.cxInput--checkbox:indeterminate{accent-color:var(--cxForm-warning)!important}
.cxInput--checkbox:default,
.cxInput--radio:default{outline-color:var(--cxForm-primary)}

.cxInput--color{
  inline-size:48px!important;
  block-size:38px!important;
  padding:3px!important;
  border:1px solid var(--cxForm-border)!important;
  border-radius:8px!important;
  background:#fff!important;
  cursor:pointer;
}

.cxInput--file{
  inline-size:100%;
  min-inline-size:0;
  min-block-size:42px;
  padding:5px!important;
  border:1px solid var(--cxForm-border)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:var(--cxForm-muted)!important;
  font:400 12px/1.4 var(--cxForm-font)!important;
  cursor:pointer;
}

.cxInput--file::file-selector-button{
  min-block-size:30px;
  margin-inline-end:10px;
  padding:0 12px;
  border:0;
  border-radius:6px;
  background:#eef4fb;
  color:#245f9f;
  font:700 11px/1 var(--cxForm-font);
  cursor:pointer;
  transition:background-color .15s ease;
}
.cxInput--file:hover::file-selector-button{background:#dfeeff}

.cxInput--range{
  -webkit-appearance:none!important;
  appearance:none!important;
  inline-size:100%;
  block-size:28px;
  margin:0;
  padding:0;
  background:transparent!important;
  accent-color:var(--cxForm-primary);
  cursor:pointer;
}
.cxInput--range::-webkit-slider-runnable-track{
  block-size:5px;
  border-radius:999px;
  background:#dbe4ee;
}
.cxInput--range::-webkit-slider-thumb{
  -webkit-appearance:none;
  inline-size:17px;
  block-size:17px;
  margin-block-start:-6px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--cxForm-primary);
  box-shadow:0 1px 4px rgba(15,23,42,.25);
}
.cxInput--range::-moz-range-track{
  block-size:5px;
  border-radius:999px;
  background:#dbe4ee;
}
.cxInput--range::-moz-range-thumb{
  inline-size:15px;
  block-size:15px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--cxForm-primary);
  box-shadow:0 1px 4px rgba(15,23,42,.25);
}

.cxInput--date::-webkit-calendar-picker-indicator,
.cxInput--datetime-local::-webkit-calendar-picker-indicator,
.cxInput--month::-webkit-calendar-picker-indicator,
.cxInput--week::-webkit-calendar-picker-indicator,
.cxInput--time::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.65;
}

.cxInput--search::-webkit-search-cancel-button{
  cursor:pointer;
  opacity:.65;
}

.cxInput--hidden{display:none!important}
.cxInput--image{max-inline-size:100%;block-size:auto;cursor:pointer}

.cxSelect{
  -webkit-appearance:auto!important;
  appearance:auto!important;
  cursor:pointer;
}
.cxSelect[multiple]{block-size:auto;min-block-size:110px;padding:6px!important}
.cxOption,.cxOptgroup{background:#fff;color:var(--cxForm-text);font-family:var(--cxForm-font)}
.cxOptgroup{font-weight:700}

.cx-select-wrap{min-inline-size:0}
.cx-select-native{position:absolute!important;opacity:0!important;pointer-events:none!important}
.cxSelectControl,
.cx-select-button{
  -webkit-appearance:none!important;
  appearance:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  cursor:pointer!important;
}
.cx-select-menu{
  z-index:2147483646!important;
  border:1px solid var(--cxForm-border)!important;
  border-radius:9px!important;
  background:#fff!important;
  box-shadow:0 12px 30px rgba(15,23,42,.16)!important;
  color:var(--cxForm-text)!important;
  font-family:var(--cxForm-font)!important;
}
.cx-select-option{
  background:#fff!important;
  color:var(--cxForm-text)!important;
  font-family:var(--cxForm-font)!important;
}
.cx-select-option:hover,
.cx-select-option:focus,
.cx-select-option.active{background:#eef5ff!important;color:#1f5f9f!important}

.cxButton,
button.cxButton,
input.cxButton{
  -webkit-appearance:none!important;
  appearance:none!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  inline-size:auto;
  min-inline-size:0;
  min-block-size:36px;
  margin:0;
  padding:0 15px!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#344054!important;
  -webkit-text-fill-color:currentColor!important;
  font:700 11px/1 var(--cxForm-font)!important;
  letter-spacing:normal!important;
  text-align:center;
  text-transform:none!important;
  user-select:none;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,filter .15s ease;
}
.cxButton:hover{filter:brightness(1.02)!important}
.cxButton--primary{border-color:var(--cxForm-primary)!important;background:var(--cxForm-primary)!important;color:#fff!important}
.cxButton--secondary{border-color:var(--cxForm-border)!important;background:#fff!important;color:#344054!important}
.cxButton--danger{border-color:var(--cxForm-danger)!important;background:var(--cxForm-danger)!important;color:#fff!important}
.cxButton--success{border-color:var(--cxForm-success)!important;background:var(--cxForm-success)!important;color:#fff!important}
.cxButton--warning{border-color:#e59a0a!important;background:#e59a0a!important;color:#fff!important}
.cxButton--ghost{border-color:transparent!important;background:transparent!important;color:var(--cxForm-primary)!important}
.cxButton--link{min-inline-size:0;padding:0!important;border:0!important;background:transparent!important;color:var(--cxForm-primary)!important;text-decoration:underline}
.cxButton--icon{inline-size:36px!important;min-inline-size:36px!important;block-size:36px!important;min-block-size:36px!important;padding:0!important}
.cxButton--compact{min-block-size:34px!important;padding-inline:10px!important;font-size:10px!important}
.cxForm .cxButton:not(.cxButton--icon):not(.cxButton--compact),
dialog .cxButton:not(.cxButton--icon):not(.cxButton--compact){min-inline-size:88px}

.cxOutput{
  display:block;
  min-block-size:38px;
  padding:9px 11px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#f8fafc;
  color:#344054;
  font:500 12px/1.45 var(--cxForm-font);
}

.cxDatalist{display:none}

.cxForm--inline{display:flex;align-items:end;flex-wrap:wrap;gap:10px}
.cxForm--grid,.cxFormGrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.cxField--full{grid-column:1/-1}
.cxField--half{grid-column:span 6}
.cxField--third{grid-column:span 4}
.cxField--quarter{grid-column:span 3}

.cxInput--small,.cxTextarea--small,.cxSelect--small{--cxForm-height:34px;font-size:12px!important}
.cxInput--large,.cxTextarea--large,.cxSelect--large{--cxForm-height:48px;font-size:14px!important}

@media(max-width:720px){
  .cxField--half,.cxField--third,.cxField--quarter{grid-column:1/-1}
  .cxForm--inline{align-items:stretch}
  .cxForm--inline>.cxLabel{inline-size:100%}
}

@media(prefers-reduced-motion:reduce){
  .cxInput,.cxTextarea,.cxSelect,.cxButton,.cxInput--file::file-selector-button{transition:none!important;animation:none!important}
}

/* Creatix Forms 1.0.1 — legacy compatibility bridge
   The old drawer stylesheet contains high-specificity, !important dark hover
   rules. Keep native cx text controls light in every modal/wizard state while
   the legacy CSS is retired gradually. */
html body .cx-drawer .cx-form-grid > label > textarea.cxTextarea,
html body .cx-drawer .cx-form-stack > label > textarea.cxTextarea,
html body .cx-module-settings-drawer .cx-form-grid textarea.cxTextarea,
html body .cx-module-settings-drawer .cx-form-stack textarea.cxTextarea,
html body .cx-dialog-card textarea.cxTextarea,
html body dialog textarea.cxTextarea {
  appearance:none!important;
  -webkit-appearance:none!important;
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  border-color:var(--cxForm-border)!important;
  color:var(--cxForm-text)!important;
  -webkit-text-fill-color:var(--cxForm-text)!important;
  caret-color:var(--cxForm-text)!important;
  filter:none!important;
  color-scheme:light!important;
}

html body .cx-drawer .cx-form-grid > label > textarea.cxTextarea:hover,
html body .cx-drawer .cx-form-grid > label > textarea.cxTextarea:active,
html body .cx-drawer .cx-form-stack > label > textarea.cxTextarea:hover,
html body .cx-drawer .cx-form-stack > label > textarea.cxTextarea:active,
html body .cx-module-settings-drawer .cx-form-grid textarea.cxTextarea:hover,
html body .cx-module-settings-drawer .cx-form-grid textarea.cxTextarea:active,
html body .cx-module-settings-drawer .cx-form-stack textarea.cxTextarea:hover,
html body .cx-module-settings-drawer .cx-form-stack textarea.cxTextarea:active,
html body .cx-dialog-card textarea.cxTextarea:hover,
html body .cx-dialog-card textarea.cxTextarea:active,
html body dialog textarea.cxTextarea:hover,
html body dialog textarea.cxTextarea:active {
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  border-color:var(--cxForm-border-hover)!important;
  color:var(--cxForm-text)!important;
  -webkit-text-fill-color:var(--cxForm-text)!important;
  filter:none!important;
}

html body .cx-drawer .cx-form-grid > label > textarea.cxTextarea:focus,
html body .cx-drawer .cx-form-grid > label > textarea.cxTextarea:focus-visible,
html body .cx-drawer .cx-form-stack > label > textarea.cxTextarea:focus,
html body .cx-drawer .cx-form-stack > label > textarea.cxTextarea:focus-visible,
html body .cx-module-settings-drawer textarea.cxTextarea:focus,
html body .cx-module-settings-drawer textarea.cxTextarea:focus-visible,
html body .cx-dialog-card textarea.cxTextarea:focus,
html body .cx-dialog-card textarea.cxTextarea:focus-visible,
html body dialog textarea.cxTextarea:focus,
html body dialog textarea.cxTextarea:focus-visible {
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  border-color:var(--cxForm-primary)!important;
  box-shadow:var(--cxForm-focus)!important;
  color:var(--cxForm-text)!important;
  -webkit-text-fill-color:var(--cxForm-text)!important;
  filter:none!important;
}

html body .cx-module-settings-drawer textarea.cxTextarea[readonly],
html body .cx-module-settings-drawer textarea.cxTextarea:disabled,
html body dialog textarea.cxTextarea[readonly],
html body dialog textarea.cxTextarea:disabled {
  background:var(--cxForm-bg-muted)!important;
  background-color:var(--cxForm-bg-muted)!important;
  color:#667085!important;
  -webkit-text-fill-color:#667085!important;
}

/* Existing Creatix buttons keep their established page/module/dialog skins.
   cxButton remains available as an explicit opt-in component for new forms. */
.cxObject--button:not(.cxButton),
input.cxObject--input:not(.cxButton) {
  --cx-object-registered:1;
}