/**
 * System form controls — restyles the Bootstrap form primitives used by every
 * input component (x-input, x-input-textarea, x-input-password,
 * x-input-checkbox-radio, x-input-switch, x-input-search, currency-number, …)
 * so they match the system look and sit flush with the nice-select control.
 *
 * Reference (nice-select .ns-control): 10px radius, rgba(16,24,40,.16) border,
 * primary focus border + soft primary ring. All colours derive from
 * --primary-color, so tenant theming carries through. Light + dark aware.
 */

:root {
  --sf-border: rgba(16, 24, 40, .16);
  --sf-radius: 10px;
  --sf-bg: #fff;
  --sf-fg: #384551;
  --sf-muted: #8a94a6;
  --sf-ring: color-mix(in srgb, var(--primary-color, #696cff) 15%, transparent);
  --sf-soft: color-mix(in srgb, var(--primary-color, #696cff) 10%, transparent);
}

/* ------------------------------------------------------------------ */
/* Labels + helper text                                               */
/* ------------------------------------------------------------------ */
.form-label {
  margin-bottom: .4rem;
  font-weight: 600;
  font-size: .85rem;
  color: var(--sf-fg);
}
.form-text {
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--sf-muted);
}

/* ------------------------------------------------------------------ */
/* Text inputs, selects, textareas                                    */
/* ------------------------------------------------------------------ */
.form-control,
.form-select {
  color: var(--sf-fg);
  background-color: var(--sf-bg);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover:not(:focus):not([disabled]):not([readonly]),
.form-select:hover:not(:focus):not([disabled]) {
  border-color: color-mix(in srgb, var(--primary-color, #696cff) 40%, var(--sf-border));
}
.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color, #696cff);
  box-shadow: 0 0 0 3px var(--sf-ring);
}
.form-control::placeholder { color: var(--sf-muted); opacity: 1; }

textarea.form-control { border-radius: var(--sf-radius); padding-top: .5rem; }

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: color-mix(in srgb, var(--sf-border) 22%, #fff);
  opacity: 1;
  cursor: not-allowed;
}
.form-control[readonly].form-control-plaintext {
  background: transparent;
  border-color: transparent;
  cursor: text;
}

/* File input */
.form-control[type="file"] { padding: .32rem .75rem; }
.form-control[type="file"]::file-selector-button {
  margin: -.32rem .75rem -.32rem -.75rem;
  padding: .55rem .9rem;
  border: 0;
  border-inline-end: 1px solid var(--sf-border);
  background: color-mix(in srgb, var(--primary-color, #696cff) 8%, #fff);
  color: var(--primary-color, #696cff);
  font-weight: 600;
  transition: background .15s ease;
}
.form-control[type="file"]:hover::file-selector-button {
  background: color-mix(in srgb, var(--primary-color, #696cff) 15%, #fff);
}

/* Color picker input */
.form-control-color { border-radius: var(--sf-radius); }

/* ------------------------------------------------------------------ */
/* input-group + merged groups (password toggle, prefixes/suffixes)   */
/* ------------------------------------------------------------------ */
.input-group-text {
  color: var(--sf-muted);
  background-color: color-mix(in srgb, var(--sf-border) 14%, #fff);
  border: 1px solid var(--sf-border);
}
.input-group:not(.input-group-merge) > .form-control,
.input-group:not(.input-group-merge) > .form-select {
  border-radius: 0;
}
.input-group > :first-child { border-start-start-radius: var(--sf-radius); border-end-start-radius: var(--sf-radius); }
.input-group > :last-child  { border-start-end-radius: var(--sf-radius);  border-end-end-radius: var(--sf-radius); }

/* Merged group behaves as one control */
.input-group-merge {
  border-radius: var(--sf-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-group-merge .form-control,
.input-group-merge .input-group-text {
  border-color: var(--sf-border);
}
.input-group-merge .form-control:focus,
.input-group-merge .form-select:focus { box-shadow: none; }
.input-group-merge:focus-within {
  box-shadow: 0 0 0 3px var(--sf-ring);
}
.input-group-merge:focus-within .form-control,
.input-group-merge:focus-within .input-group-text {
  border-color: var(--primary-color, #696cff);
}
.input-group-merge .input-group-text {
  cursor: pointer;
  background-color: var(--sf-bg);
  color: var(--sf-muted);
  transition: color .15s ease;
}
.input-group-merge .input-group-text:hover { color: var(--primary-color, #696cff); }

/* ------------------------------------------------------------------ */
/* Checkboxes, radios, switches                                       */
/* ------------------------------------------------------------------ */
.form-check-input {
  width: 1.15em;
  height: 1.15em;
  border: 1.5px solid var(--sf-border);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.form-check-input:focus { box-shadow: 0 0 0 3px var(--sf-ring); border-color: var(--primary-color, #696cff); }
.form-check-input:checked {
  background-color: var(--primary-color, #696cff);
  border-color: var(--primary-color, #696cff);
}
.form-check-input:disabled { opacity: .5; cursor: not-allowed; }
.form-check-label { cursor: pointer; color: var(--sf-fg); }

/* Switch */
.form-switch .form-check-input { width: 2.1em; border-radius: 2em; }
.form-switch .form-check-input:checked { background-color: var(--primary-color, #696cff); }

/* ------------------------------------------------------------------ */
/* Range                                                              */
/* ------------------------------------------------------------------ */
.form-range::-webkit-slider-thumb { background: var(--primary-color, #696cff); }
.form-range::-webkit-slider-thumb:active { background: color-mix(in srgb, var(--primary-color, #696cff) 80%, #000); }
.form-range::-moz-range-thumb { background: var(--primary-color, #696cff); border: 0; }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--sf-ring); }

/* ------------------------------------------------------------------ */
/* Toggle switch (x-input-switch — theme .switch widget)              */
/* Clean iOS-style: flat solid fill, plain white knob, smooth slide.  */
/* ------------------------------------------------------------------ */
.switch { align-items: center; }

/* Track — flat pill, no border, no inner shadow */
.switch .switch-toggle-slider {
  background-color: color-mix(in srgb, var(--sf-border) 60%, var(--sf-bg));
  border: 0;
  border-radius: 2rem;
  box-shadow: none;
  transition: background-color .2s ease;
}

/* Knob — plain white circle, quick linear-ish slide (no bounce) */
.switch .switch-toggle-slider::after,
.switch .switch-toggle-slider::before {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .2);
  transition: transform .2s ease, left .2s ease, right .2s ease;
}

/* On — solid primary fill (all variants keep flat solid, no gradient/glow) */
.switch.switch-primary .switch-input:checked ~ .switch-toggle-slider {
  background-color: var(--primary-color, #696cff);
  background-image: none;
  box-shadow: none;
}

/* Focus ring */
.switch .switch-input:focus ~ .switch-toggle-slider,
.switch .switch-input:focus-visible ~ .switch-toggle-slider {
  box-shadow: 0 0 0 3px var(--sf-ring);
}

/* On/off glyphs + label */
.switch .switch-on { color: #fff; }
.switch .switch-off { color: var(--sf-muted); }
.switch .switch-label {
  margin-inline-start: .55rem;
  font-weight: 500;
  color: var(--sf-fg);
}

/* Disabled */
.switch .switch-input:disabled ~ .switch-toggle-slider { opacity: .5; }
.switch:has(.switch-input:disabled) { cursor: not-allowed; }

html.dark-style .switch .switch-toggle-slider {
  background-color: color-mix(in srgb, #fff 12%, var(--sf-bg));
}

/* ------------------------------------------------------------------ */
/* Tagify (x-input-search, x-input-tags)                              */
/* ------------------------------------------------------------------ */
.tagify {
  --tags-border-color: var(--sf-border);
  --tags-hover-border-color: color-mix(in srgb, var(--primary-color, #696cff) 40%, var(--sf-border));
  --tags-focus-border-color: var(--primary-color, #696cff);
  --tag-bg: var(--sf-soft);
  --tag-text-color: var(--primary-color, #696cff);
  --tag-hover: color-mix(in srgb, var(--primary-color, #696cff) 18%, transparent);
  --tag-remove-btn-color: var(--primary-color, #696cff);
  border-radius: var(--sf-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tagify--focus { box-shadow: 0 0 0 3px var(--sf-ring); }
.tagify__tag > div { border-radius: 6px; }

/* ------------------------------------------------------------------ */
/* Dark theme                                                         */
/* ------------------------------------------------------------------ */
html.dark-style {
  --sf-border: rgba(255, 255, 255, .18);
  --sf-bg: #2b2c40;
  --sf-fg: #cbcbe2;
  --sf-muted: #7071a4;
}
html.dark-style .input-group-text { background-color: color-mix(in srgb, #fff 4%, #2b2c40); }
html.dark-style .input-group-merge .input-group-text { background-color: var(--sf-bg); }
html.dark-style .form-control:disabled,
html.dark-style .form-select:disabled,
html.dark-style .form-control[readonly] { background-color: color-mix(in srgb, #fff 5%, #2b2c40); }