/* Adapted from https://uiverse.io/jeel-sardhara/foolish-cow-14
 * MIT License
 * Copyright (c) 2026 jeel-sardhara
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

/* Shared form tokens. Use pt-form-panel for full-size form containers.
   form-narrow also receives the panel style, retaining its existing width. */
:root {
  --form-panel-background: linear-gradient(0deg, var(--color-surface) 0%, var(--color-surface-alt) 100%);
  --form-panel-border: var(--color-surface);
  --form-panel-radius: var(--radius-panel);
  --form-field-radius: var(--radius-control);
  --form-panel-shadow: 0 30px 30px -20px color-mix(in srgb, var(--color-primary) 35%, transparent);
  --form-field-shadow: 0 10px 10px -5px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.form-narrow, .pt-form-panel {
  background: var(--form-panel-background);
  border: 5px solid var(--form-panel-border);
  border-radius: var(--form-panel-radius);
  padding: 25px 35px;
  box-shadow: var(--form-panel-shadow);
}
/* File upload cards and button controls retain their dedicated styles. */
input.form-control:not([type="file"]):not([type="hidden"]),
textarea.form-control, select.form-control, select.form-select, .bike-notes-editor {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: none;
  border-inline: 2px solid transparent;
  border-radius: var(--form-field-radius);
  padding: 15px 20px;
  box-shadow: var(--form-field-shadow);
}
select.form-select { padding-right: 2.5rem; }
.form-control::placeholder { color: var(--color-text-muted); opacity: 1; }
input.form-control:not([type="file"]):focus,
textarea.form-control:focus, select.form-control:focus, select.form-select:focus, .bike-notes-editor:focus {
  border-inline-color: var(--color-accent);
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow: var(--form-field-shadow);
}
input.form-control.is-invalid, textarea.form-control.is-invalid, select.form-select.is-invalid {
  border-inline-color: var(--color-danger);
}
input.form-control:disabled, textarea.form-control:disabled, select.form-select:disabled {
  background-color: var(--color-surface-alt);
  box-shadow: none;
}
.form-narrow .form-label, .pt-form-panel .form-label { margin-bottom: .65rem; }
.form-narrow form > .mb-3, form.pt-form-panel > .mb-3,
form.pt-form-panel > .form-group { margin-bottom: 1.5rem !important; }
/* Preserve compact controls in toolbars and input groups. */
input.form-control.form-control-sm, select.form-select.form-select-sm {
  padding: .5rem .75rem;
  border-radius: var(--form-field-radius);
}
select.form-select.form-select-sm { padding-right: 2.5rem; }
@media (max-width: 575.98px) {
  .form-narrow, .pt-form-panel { padding: 24px 18px; border-radius: var(--form-panel-radius); }
}

.pt-form-panel.pt-form-panel--compact {
  padding: 1rem;
  border-radius: var(--form-panel-radius);
}