/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Form Styles                                              - */
/* - Inspired by PicoCSS                                      - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Variables                                                - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Colors - using CSS variables for theming */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Form Container                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Reset */
  margin: 0;
  padding: 0; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Fieldset & Legend                                        - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form fieldset {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 0.375rem;
  background-color: transparent; }

form.form legend {
  padding: 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-color, #1a1a1a); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Form Group                                               - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; }

form.form .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; }

form.form .form-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem; }
  form.form .form-section > h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color, #1a1a1a); }

form.form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color, #d1d5db); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Labels                                                   - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color, #1a1a1a);
  cursor: pointer; }

form.form label.required::after {
  content: " *";
  color: var(--color-danger, #dc2626); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Text Inputs                                              - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form input[type="text"],
form.form input[type="email"],
form.form input[type="password"],
form.form input[type="number"],
form.form input[type="tel"],
form.form input[type="url"],
form.form input[type="search"],
form.form input[type="date"],
form.form input[type="time"],
form.form input[type="datetime-local"],
form.form input[type="month"],
form.form input[type="week"] {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-color, #1a1a1a);
  background-color: var(--background-color, #ffffff);
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 0.375rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s; }
  form.form input[type="text"]::placeholder,
  form.form input[type="email"]::placeholder,
  form.form input[type="password"]::placeholder,
  form.form input[type="number"]::placeholder,
  form.form input[type="tel"]::placeholder,
  form.form input[type="url"]::placeholder,
  form.form input[type="search"]::placeholder,
  form.form input[type="date"]::placeholder,
  form.form input[type="time"]::placeholder,
  form.form input[type="datetime-local"]::placeholder,
  form.form input[type="month"]::placeholder,
  form.form input[type="week"]::placeholder {
    color: var(--text-color-placeholder, #9ca3af);
    opacity: 1; }
  form.form input[type="text"]:hover:not(:disabled):not(:focus),
  form.form input[type="email"]:hover:not(:disabled):not(:focus),
  form.form input[type="password"]:hover:not(:disabled):not(:focus),
  form.form input[type="number"]:hover:not(:disabled):not(:focus),
  form.form input[type="tel"]:hover:not(:disabled):not(:focus),
  form.form input[type="url"]:hover:not(:disabled):not(:focus),
  form.form input[type="search"]:hover:not(:disabled):not(:focus),
  form.form input[type="date"]:hover:not(:disabled):not(:focus),
  form.form input[type="time"]:hover:not(:disabled):not(:focus),
  form.form input[type="datetime-local"]:hover:not(:disabled):not(:focus),
  form.form input[type="month"]:hover:not(:disabled):not(:focus),
  form.form input[type="week"]:hover:not(:disabled):not(:focus) {
    border-color: var(--border-color-hover, #9ca3af); }
  form.form input[type="text"]:focus,
  form.form input[type="email"]:focus,
  form.form input[type="password"]:focus,
  form.form input[type="number"]:focus,
  form.form input[type="tel"]:focus,
  form.form input[type="url"]:focus,
  form.form input[type="search"]:focus,
  form.form input[type="date"]:focus,
  form.form input[type="time"]:focus,
  form.form input[type="datetime-local"]:focus,
  form.form input[type="month"]:focus,
  form.form input[type="week"]:focus {
    border-color: var(--draw-color-primary, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw-color-primary, #3b82f6) 20%, transparent); }
  form.form input[type="text"]:disabled,
  form.form input[type="email"]:disabled,
  form.form input[type="password"]:disabled,
  form.form input[type="number"]:disabled,
  form.form input[type="tel"]:disabled,
  form.form input[type="url"]:disabled,
  form.form input[type="search"]:disabled,
  form.form input[type="date"]:disabled,
  form.form input[type="time"]:disabled,
  form.form input[type="datetime-local"]:disabled,
  form.form input[type="month"]:disabled,
  form.form input[type="week"]:disabled {
    opacity: 0.5;
    background-color: var(--background-color-muted, #f3f4f6);
    cursor: not-allowed; }
  form.form input[type="text"]:read-only,
  form.form input[type="email"]:read-only,
  form.form input[type="password"]:read-only,
  form.form input[type="number"]:read-only,
  form.form input[type="tel"]:read-only,
  form.form input[type="url"]:read-only,
  form.form input[type="search"]:read-only,
  form.form input[type="date"]:read-only,
  form.form input[type="time"]:read-only,
  form.form input[type="datetime-local"]:read-only,
  form.form input[type="month"]:read-only,
  form.form input[type="week"]:read-only {
    background-color: var(--background-color-muted, #f3f4f6); }

/* Number input - hide spinners */
form.form input[type="number"] {
  -moz-appearance: textfield; }
  form.form input[type="number"]::-webkit-outer-spin-button, form.form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Select                                                   - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form select {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0.5rem 0.75rem;
  padding-right: 2.5rem;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-color, #1a1a1a);
  background-color: var(--background-color, #ffffff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 1.5rem;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 0.375rem;
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s; }
  form.form select:hover:not(:disabled):not(:focus) {
    border-color: var(--border-color-hover, #9ca3af); }
  form.form select:focus {
    border-color: var(--draw-color-primary, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw-color-primary, #3b82f6) 20%, transparent); }
  form.form select:disabled {
    opacity: 0.5;
    background-color: var(--background-color-muted, #f3f4f6);
    cursor: not-allowed; }
  form.form select option {
    color: var(--text-color, #1a1a1a);
    background-color: var(--background-color, #ffffff); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Textarea                                                 - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form textarea {
  display: block;
  width: 100%;
  min-height: 6rem;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-color, #1a1a1a);
  background-color: var(--background-color, #ffffff);
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 0.375rem;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s; }
  form.form textarea::placeholder {
    color: var(--text-color-placeholder, #9ca3af);
    opacity: 1; }
  form.form textarea:hover:not(:disabled):not(:focus) {
    border-color: var(--border-color-hover, #9ca3af); }
  form.form textarea:focus {
    border-color: var(--draw-color-primary, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw-color-primary, #3b82f6) 20%, transparent); }
  form.form textarea:disabled {
    opacity: 0.5;
    background-color: var(--background-color-muted, #f3f4f6);
    cursor: not-allowed;
    resize: none; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Checkbox & Radio                                         - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form input[type="checkbox"],
form.form input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  margin-right: 0.5rem;
  vertical-align: middle;
  background-color: var(--background-color, #ffffff);
  border: 1px solid var(--border-color, #d1d5db);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s; }
  form.form input[type="checkbox"]:hover:not(:disabled),
  form.form input[type="radio"]:hover:not(:disabled) {
    border-color: var(--draw-color-primary, #3b82f6); }
  form.form input[type="checkbox"]:focus,
  form.form input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw-color-primary, #3b82f6) 20%, transparent); }
  form.form input[type="checkbox"]:checked,
  form.form input[type="radio"]:checked {
    background-color: var(--draw-color-primary, #3b82f6);
    border-color: var(--draw-color-primary, #3b82f6); }
  form.form input[type="checkbox"]:disabled,
  form.form input[type="radio"]:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

form.form input[type="checkbox"] {
  border-radius: 0.375rem; }
  form.form input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: .875rem; }

form.form input[type="radio"] {
  border-radius: 50%; }
  form.form input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='white' cx='12' cy='12' r='5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: .625rem; }

/* Checkbox/Radio inline with label */
form.form .checkbox-group,
form.form .radio-group {
  display: flex;
  align-items: center; }
  form.form .checkbox-group > label,
  form.form .radio-group > label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-weight: 400;
    cursor: pointer; }

form.form .checkbox-row,
form.form .radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; }
  form.form .checkbox-row > label,
  form.form .radio-row > label {
    display: inline-flex;
    align-items: center;
    font-weight: 400;
    cursor: pointer; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Range / Slider                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form input[type="range"] {
  width: 100%;
  height: .5rem;
  margin: 0.5rem 0;
  padding: 0;
  background: var(--border-color, #d1d5db);
  border: none;
  border-radius: 0.375rem;
  appearance: none;
  cursor: pointer; }
  form.form input[type="range"]::-webkit-slider-thumb {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -.375rem;
    background: var(--draw-color-primary, #3b82f6);
    border: none;
    border-radius: 50%;
    appearance: none;
    cursor: pointer;
    transition: transform 0.2s; }
    form.form input[type="range"]::-webkit-slider-thumb:hover {
      transform: scale(1.1); }
  form.form input[type="range"]::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    background: var(--draw-color-primary, #3b82f6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s; }
    form.form input[type="range"]::-moz-range-thumb:hover {
      transform: scale(1.1); }
  form.form input[type="range"]:focus {
    outline: none; }
    form.form input[type="range"]:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw-color-primary, #3b82f6) 20%, transparent); }
    form.form input[type="range"]:focus::-moz-range-thumb {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw-color-primary, #3b82f6) 20%, transparent); }
  form.form input[type="range"]:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - File Input                                               - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form input[type="file"] {
  display: block;
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text-color, #1a1a1a);
  background-color: var(--background-color, #ffffff);
  border: 1px dashed var(--border-color, #d1d5db);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: border-color 0.2s; }
  form.form input[type="file"]:hover:not(:disabled) {
    border-color: var(--draw-color-primary, #3b82f6); }
  form.form input[type="file"]:focus {
    outline: none;
    border-color: var(--draw-color-primary, #3b82f6); }
  form.form input[type="file"]:disabled {
    opacity: 0.5;
    cursor: not-allowed; }
  form.form input[type="file"]::file-selector-button {
    padding: 0.25rem 0.5rem;
    margin-right: 0.5rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color, #1a1a1a);
    background-color: var(--background-color-muted, #f3f4f6);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s; }
    form.form input[type="file"]::file-selector-button:hover {
      background-color: var(--border-color, #d1d5db); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Color Input                                              - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form input[type="color"] {
  width: 3rem;
  height: 2.75rem;
  padding: 0.25rem;
  box-sizing: border-box;
  background-color: var(--background-color, #ffffff);
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 0.375rem;
  cursor: pointer; }
  form.form input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0; }
  form.form input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: calc($form-border-radius - 2px); }
  form.form input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: calc($form-border-radius - 2px); }
  form.form input[type="color"]:focus {
    outline: none;
    border-color: var(--draw-color-primary, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw-color-primary, #3b82f6) 20%, transparent); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Buttons                                                  - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form button,
form.form input[type="submit"],
form.form input[type="reset"],
form.form input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text-color, #1a1a1a);
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--background-color, #ffffff);
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
  form.form button:hover:not(:disabled),
  form.form input[type="submit"]:hover:not(:disabled),
  form.form input[type="reset"]:hover:not(:disabled),
  form.form input[type="button"]:hover:not(:disabled) {
    background-color: var(--background-color-muted, #f3f4f6);
    border-color: var(--border-color-hover, #9ca3af); }
  form.form button:focus,
  form.form input[type="submit"]:focus,
  form.form input[type="reset"]:focus,
  form.form input[type="button"]:focus {
    outline: none;
    border-color: var(--draw-color-primary, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw-color-primary, #3b82f6) 20%, transparent); }
  form.form button:active:not(:disabled),
  form.form input[type="submit"]:active:not(:disabled),
  form.form input[type="reset"]:active:not(:disabled),
  form.form input[type="button"]:active:not(:disabled) {
    transform: translateY(1px); }
  form.form button:disabled,
  form.form input[type="submit"]:disabled,
  form.form input[type="reset"]:disabled,
  form.form input[type="button"]:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

/* Primary button */
form.form button.primary,
form.form button[type="submit"] {
  color: #ffffff;
  background-color: var(--draw-color-primary, #3b82f6);
  border-color: var(--draw-color-primary, #3b82f6); }
  form.form button.primary:hover:not(:disabled),
  form.form button[type="submit"]:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--draw-color-primary, #3b82f6) 85%, black);
    border-color: color-mix(in srgb, var(--draw-color-primary, #3b82f6) 85%, black); }

/* Success button */
form.form button.success {
  color: #ffffff;
  background-color: var(--color-success, #16a34a);
  border-color: var(--color-success, #16a34a); }
  form.form button.success:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--color-success, #16a34a) 85%, black);
    border-color: color-mix(in srgb, var(--color-success, #16a34a) 85%, black); }
  form.form button.success:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success, #16a34a) 20%, transparent); }

/* Danger button */
form.form button.danger {
  color: #ffffff;
  background-color: var(--color-danger, #dc2626);
  border-color: var(--color-danger, #dc2626); }
  form.form button.danger:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--color-danger, #dc2626) 85%, black);
    border-color: color-mix(in srgb, var(--color-danger, #dc2626) 85%, black); }
  form.form button.danger:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger, #dc2626) 20%, transparent); }

/* Warning button */
form.form button.warning {
  color: #ffffff;
  background-color: var(--color-warning, #d97706);
  border-color: var(--color-warning, #d97706); }
  form.form button.warning:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--color-warning, #d97706) 85%, black);
    border-color: color-mix(in srgb, var(--color-warning, #d97706) 85%, black); }
  form.form button.warning:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-warning, #d97706) 20%, transparent); }

/* Outline button */
form.form button.outline {
  background-color: transparent; }
  form.form button.outline:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--draw-color-primary, #3b82f6) 10%, transparent); }
  form.form button.outline.primary {
    color: var(--draw-color-primary, #3b82f6);
    border-color: var(--draw-color-primary, #3b82f6); }
    form.form button.outline.primary:hover:not(:disabled) {
      background-color: color-mix(in srgb, var(--draw-color-primary, #3b82f6) 10%, transparent); }
  form.form button.outline.success {
    color: var(--color-success, #16a34a);
    border-color: var(--color-success, #16a34a); }
    form.form button.outline.success:hover:not(:disabled) {
      background-color: color-mix(in srgb, var(--color-success, #16a34a) 10%, transparent); }
  form.form button.outline.danger {
    color: var(--color-danger, #dc2626);
    border-color: var(--color-danger, #dc2626); }
    form.form button.outline.danger:hover:not(:disabled) {
      background-color: color-mix(in srgb, var(--color-danger, #dc2626) 10%, transparent); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Validation States                                        - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Invalid */
form.form input:invalid:not(:placeholder-shown),
form.form select:invalid,
form.form textarea:invalid:not(:placeholder-shown),
form.form .is-invalid input,
form.form .is-invalid select,
form.form .is-invalid textarea,
form.form input.is-invalid,
form.form select.is-invalid,
form.form textarea.is-invalid {
  border-color: var(--color-danger, #dc2626); }
  form.form input:invalid:not(:placeholder-shown):focus,
  form.form select:invalid:focus,
  form.form textarea:invalid:not(:placeholder-shown):focus,
  form.form .is-invalid input:focus,
  form.form .is-invalid select:focus,
  form.form .is-invalid textarea:focus,
  form.form input.is-invalid:focus,
  form.form select.is-invalid:focus,
  form.form textarea.is-invalid:focus {
    border-color: var(--color-danger, #dc2626);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger, #dc2626) 20%, transparent); }

/* Valid */
form.form .is-valid input,
form.form .is-valid select,
form.form .is-valid textarea,
form.form input.is-valid,
form.form select.is-valid,
form.form textarea.is-valid {
  border-color: var(--color-success, #16a34a); }
  form.form .is-valid input:focus,
  form.form .is-valid select:focus,
  form.form .is-valid textarea:focus,
  form.form input.is-valid:focus,
  form.form select.is-valid:focus,
  form.form textarea.is-valid:focus {
    border-color: var(--color-success, #16a34a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success, #16a34a) 20%, transparent); }

/* Validation messages */
form.form .form-error,
form.form .form-success,
form.form .form-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem; }

form.form .form-error {
  color: var(--color-danger, #dc2626); }

form.form .form-success {
  color: var(--color-success, #16a34a); }

form.form .form-hint {
  color: var(--text-color-muted, #6b7280); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Calculated / Read-only Display                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form .calculated {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; }
  form.form .calculated > label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color-muted, #6b7280); }
  form.form .calculated > span {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--draw-color-primary, #3b82f6); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Input Groups                                             - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form .input-group {
  display: flex; }
  form.form .input-group > input,
  form.form .input-group > select {
    flex: 1;
    border-radius: 0; }
    form.form .input-group > input:first-child,
    form.form .input-group > select:first-child {
      border-top-left-radius: 0.375rem;
      border-bottom-left-radius: 0.375rem; }
    form.form .input-group > input:last-child,
    form.form .input-group > select:last-child {
      border-top-right-radius: 0.375rem;
      border-bottom-right-radius: 0.375rem; }
    form.form .input-group > input:not(:first-child),
    form.form .input-group > select:not(:first-child) {
      margin-left: -1px; }
  form.form .input-group > .input-group-text {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    color: var(--text-color-muted, #6b7280);
    background-color: var(--background-color-muted, #f3f4f6);
    border: 1px solid var(--border-color, #d1d5db); }
    form.form .input-group > .input-group-text:first-child {
      border-top-left-radius: 0.375rem;
      border-bottom-left-radius: 0.375rem;
      border-right: none; }
    form.form .input-group > .input-group-text:last-child {
      border-top-right-radius: 0.375rem;
      border-bottom-right-radius: 0.375rem;
      border-left: none; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Loading State                                            - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form.form button.loading {
  position: relative;
  color: transparent;
  pointer-events: none; }
  form.form button.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    margin-top: -.5rem;
    margin-left: -.5rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: form-spinner .6s linear infinite; }
  form.form button.loading.primary::after, form.form button.loading.success::after, form.form button.loading.danger::after, form.form button.loading.warning::after {
    border-color: #ffffff;
    border-right-color: transparent; }

@keyframes form-spinner {
  to {
    transform: rotate(360deg); } }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Responsive                                               - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media (max-width: 640px) {
  form.form .form-row {
    grid-template-columns: 1fr; }
  form.form .form-actions {
    flex-direction: column; }
    form.form .form-actions > button,
    form.form .form-actions > input[type="submit"],
    form.form .form-actions > input[type="reset"] {
      width: 100%; }
  form.form .checkbox-row,
  form.form .radio-row {
    flex-direction: column;
    gap: 0.5rem; } }