/*************************************
  FORMS
  Chefchops shared form system
  Mobile-first, modern CSS, no fixed heights
*************************************/

/*************************************
  FORM LAYOUT
*************************************/

:where(.cc-form, .sheet-form, .admin-edit-form, .admin-filter-form, .filter-form, .search-form) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-space-3);
}

:where(.cc-field, .sheet-form label, .admin-edit-form label, .admin-filter-form label, .filter-form label, .search-form label) {
  display: grid;
  gap: 0.35rem;
  min-inline-size: 0;
}

:where(.form-actions, .cc-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
  align-items: center;
}

/*************************************
  LABELS / HELP TEXT
*************************************/

:where(label, .cc-label, .form-label) {
  color: var(--cc-colour-muted);
  font-size: clamp(0.84rem, 0.15vw + 0.8rem, 0.9rem);
  font-weight: 500;
  line-height: 1.3;
}

:where(.cc-help, .form-help, .help-text, .field-help) {
  color: var(--cc-colour-text-soft);
  font-size: clamp(0.76rem, 0.1vw + 0.74rem, 0.82rem);
  line-height: 1.35;
}

/*************************************
  INPUTS
*************************************/

:where(.cc-input, .cc-select, .cc-textarea, input, select, textarea) {
  box-sizing: border-box;
  width: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  min-height: var(--cc-input-min-height, 2.5rem);
  border: 1px solid var(--cc-input-border-strong, var(--cc-colour-border-strong, #9ca3af));
  border-radius: var(--cc-input-radius);
  background: var(--cc-input-bg, var(--cc-colour-surface, #fff));
  color: var(--cc-colour-text);
  font-family: var(--cc-font-sans);
  font-size: var(--cc-input-font-size);
  font-weight: 400;
  line-height: 1.4;
  padding-block: var(--cc-input-padding-y);
  padding-inline: var(--cc-input-padding-x);
  box-shadow: none;
}

:where(.form-field, .form-grid label, .form-stack label, .cc-field) > :where(
  .cc-input,
  .cc-select,
  .cc-textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
) {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

:where(textarea, .cc-textarea) {
  min-height: max(7rem, 20vh);
  resize: vertical;
}

:where(input::placeholder, textarea::placeholder, .cc-input::placeholder, .cc-textarea::placeholder) {
  color: var(--cc-colour-text-soft);
}

:where(input:focus, select:focus, textarea:focus, .cc-input:focus, .cc-select:focus, .cc-textarea:focus) {
  border-color: var(--cc-colour-primary);
  outline: 0;
  box-shadow: 0 0 0 3px var(--cc-focus-ring-primary);
}

:where(input:-webkit-autofill, input:-webkit-autofill:hover) {
  -webkit-text-fill-color: var(--cc-colour-text);
  caret-color: var(--cc-colour-text);
  -webkit-box-shadow: 0 0 0 1000px var(--cc-input-bg, var(--cc-colour-surface, #fff)) inset;
  box-shadow: 0 0 0 1000px var(--cc-input-bg, var(--cc-colour-surface, #fff)) inset;
}

:where(input:-webkit-autofill:focus) {
  -webkit-box-shadow:
    0 0 0 1000px var(--cc-input-bg, var(--cc-colour-surface, #fff)) inset,
    0 0 0 3px var(--cc-focus-ring-primary);
  box-shadow:
    0 0 0 1000px var(--cc-input-bg, var(--cc-colour-surface, #fff)) inset,
    0 0 0 3px var(--cc-focus-ring-primary);
}

:where(input[readonly], input[disabled], select[disabled], textarea[readonly], textarea[disabled], .cc-input--muted) {
  background: var(--cc-colour-surface-soft);
  color: var(--cc-colour-muted);
}

:where(select, .cc-select) {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: calc(var(--cc-input-padding-x) + 1.5rem);
  background-color: var(--cc-input-bg, var(--cc-colour-surface, #fff));
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cc-colour-text-soft) 50%),
    linear-gradient(135deg, var(--cc-colour-text-soft) 50%, transparent 50%);
  background-position:
    calc(100% - var(--cc-input-padding-x) - 0.28rem - 4px) center,
    calc(100% - var(--cc-input-padding-x) - 4px) center;
  background-size: 0.36rem 0.36rem;
  background-repeat: no-repeat;
}

:where(select[disabled], .cc-select[disabled]) {
  background-color: var(--cc-colour-surface-soft);
}

:where(input[type="checkbox"], input[type="radio"]) {
  width: auto;
  min-height: auto;
  padding: 0;
  accent-color: var(--cc-colour-primary);
}

:where(input[type="checkbox"]) {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  min-inline-size: 1.125rem;
  vertical-align: middle;
}

/*************************************
  SMALL INLINE FORMS
*************************************/

:where(.inline-form) {
  display: inline-grid;
  gap: var(--cc-space-2);
  align-items: center;
}

:where(.admin-filter-form--inline) > :where(button, .button, .btn, input[type="submit"]) {
  inline-size: 100%;
}

/*************************************
  RESPONSIVE FORM UPGRADES
*************************************/

@media (min-width: 48rem) {
  :where(.sheet-form, .admin-edit-form, .filter-form) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-form--report {
    grid-template-columns: minmax(10rem, 12rem) minmax(14rem, 22rem);
    align-items: center;
    justify-content: start;
  }

  .filter-form--report > :where(button, .button, .btn, input[type="submit"]) {
    grid-column: 2;
    inline-size: auto;
    justify-self: start;
  }

  .filter-form--compact {
    grid-template-columns: max-content minmax(10rem, 18rem);
    align-items: center;
    justify-content: start;
    column-gap: var(--cc-space-2);
  }

  .filter-form--compact > :where(input, select) {
    inline-size: 100%;
  }

  .filter-form--compact > :where(button, .button, .btn, input[type="submit"]) {
    grid-column: 2;
    inline-size: auto;
    justify-self: start;
  }

  .admin-filter-form {
    grid-template-columns: auto minmax(12rem, 22rem) auto;
    align-items: end;
    justify-content: start;
  }

  .admin-filter-form--inline {
    grid-template-columns: minmax(12rem, 22rem) auto;
  }

  .admin-filter-form--inline > :where(button, .button, .btn, input[type="submit"]) {
    inline-size: auto;
  }

  :where(.sheet-form, .admin-edit-form) :where(h1, h2, h3, .form-actions) {
    grid-column: 1 / -1;
  }
}

/* /////////////////////////////////////
   SHARED FORM LABELS
   Existing markup fallback
///////////////////////////////////// */

:where(form label) {
  color: var(--cc-colour-muted);
  font-size: clamp(0.84rem, 0.15vw + 0.8rem, 0.9rem);
  font-weight: 500;
  line-height: 1.3;
}

/* /////////////////////////////////////
   SHARED INVALID FIELD STATE
///////////////////////////////////// */

:where(input.is-invalid, select.is-invalid, textarea.is-invalid) {
  border-color: var(--cc-danger-alert-border);
  background: var(--cc-danger-alert-bg);
  color: var(--cc-colour-text);
  box-shadow: 0 0 0 3px var(--cc-danger-alert-ring);
}

:where(input.is-invalid:focus, select.is-invalid:focus, textarea.is-invalid:focus) {
  border-color: var(--cc-danger-alert-border);
  box-shadow: 0 0 0 4px var(--cc-danger-alert-ring);
}

:where(label.is-invalid) {
  color: var(--cc-danger-alert-text);
  font-weight: 600;
}

:where(input.is-warning, select.is-warning, textarea.is-warning) {
  border-color: var(--cc-colour-warning-line, var(--cc-colour-warning));
  background: var(--cc-input-bg);
  color: var(--cc-colour-text);
  box-shadow: 0 0 0 3px var(--cc-colour-warning-soft);
}

:where(input.is-warning:focus, select.is-warning:focus, textarea.is-warning:focus) {
  border-color: var(--cc-colour-warning);
  box-shadow: 0 0 0 4px var(--cc-colour-warning-soft);
}

:where(label.is-warning) {
  color: var(--cc-colour-ink-strong);
  font-weight: 600;
}

:where(input.is-invalid:-webkit-autofill) {
  -webkit-box-shadow:
    0 0 0 1000px var(--cc-danger-alert-bg) inset,
    0 0 0 3px var(--cc-danger-alert-ring);
  box-shadow:
    0 0 0 1000px var(--cc-danger-alert-bg) inset,
    0 0 0 3px var(--cc-danger-alert-ring);
}

:where(input.is-invalid:-webkit-autofill:focus) {
  -webkit-box-shadow:
    0 0 0 1000px var(--cc-danger-alert-bg) inset,
    0 0 0 4px var(--cc-danger-alert-ring);
  box-shadow:
    0 0 0 1000px var(--cc-danger-alert-bg) inset,
    0 0 0 4px var(--cc-danger-alert-ring);
}

:where(input.is-warning:-webkit-autofill) {
  -webkit-box-shadow:
    0 0 0 1000px var(--cc-input-bg, var(--cc-colour-surface, #fff)) inset,
    0 0 0 3px var(--cc-colour-warning-soft);
  box-shadow:
    0 0 0 1000px var(--cc-input-bg, var(--cc-colour-surface, #fff)) inset,
    0 0 0 3px var(--cc-colour-warning-soft);
}

:where(input.is-warning:-webkit-autofill:focus) {
  -webkit-box-shadow:
    0 0 0 1000px var(--cc-input-bg, var(--cc-colour-surface, #fff)) inset,
    0 0 0 4px var(--cc-colour-warning-soft);
  box-shadow:
    0 0 0 1000px var(--cc-input-bg, var(--cc-colour-surface, #fff)) inset,
    0 0 0 4px var(--cc-colour-warning-soft);
}


/* Compact numeric inputs used by shared forms */
.input-temp,
.input-compact-number {
  max-inline-size: 100%;
}

.responsive-table .input-temp,
.responsive-table .input-compact-number {
  max-inline-size: 5.5rem;
}

/* Compact select sizing for table-based form controls */
.form-control--fit-select {
  inline-size: fit-content;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding-inline-end: 2rem;
}

.form-control--week-select {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.form-control--day-select {
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* /////////////////////////////////////
   FORM STACK LAYOUT
   Shared spacing for stacked form sections
///////////////////////////////////// */

.form-stack {
  display: grid;
  gap: var(--cc-card-gap, clamp(0.75rem, 2vw, 1rem));
}


/* /////////////////////////////////////
   SHARED FORM FIELD + GRID FLOW
   Mobile-first form rhythm for all admin/app forms.
///////////////////////////////////// */

:where(.form-field) {
  display: grid;
  gap: var(--cc-field-gap, clamp(0.55rem, 1vw, 0.7rem));
  align-content: start;
}

:where(.form-field) > :where(span, label) {
  display: block;
  color: var(--cc-colour-ink-strong);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
}

:where(fieldset, .form-flow, .form-stack) > :where(.form-field) + :where(.form-field) {
  margin-block-start: var(--cc-form-row-gap, clamp(0.85rem, 2vw, 1.1rem));
}

:where(.form-grid) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-form-row-gap, clamp(0.85rem, 2vw, 1.1rem)) var(--cc-form-column-gap, clamp(0.85rem, 2vw, 1.1rem));
}

.form-grid--compact {
  align-items: start;
}

:where(.form-field--full),
:where(.form-grid) > :where(.form-field--full, .page-actions, .cc-panel, .table-wrap, .status-message, .error-message) {
  grid-column: 1 / -1;
}

.form-field--wide {
  grid-column: 1 / -1;
}

@media (min-width: 47.5rem) {
  :where(.form-grid:not(.form-grid--compact)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid:not(.form-grid--compact) > .form-field--wide {
    grid-column: 1 / -1;
  }

  .form-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }

  .form-grid--compact > .form-field--wide {
    grid-column: span 2;
  }
}

/* /////////////////////////////////////
   SHARED FORM ACTION SPACING
   Prevent buttons touching fields
///////////////////////////////////// */

:where(.form-field, label, .form-grid, .form-flow, .form-stack) + :where(.button, button, .btn, .page-actions, .form-actions) {
  margin-block-start: var(--cc-space-sm, 0.75rem);
}

:where(input, select, textarea) + :where(.button, button, .btn) {
  margin-block-start: var(--cc-space-sm, 0.75rem);
}

:where(.form-actions, .page-actions) {
  gap: var(--cc-space-sm, 0.75rem);
}

/* /////////////////////////////////////
   SHARED CHECKBOX ROWS
///////////////////////////////////// */

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkbox-row input[type="checkbox"] {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  min-inline-size: 1.125rem;
  margin: 0;
  accent-color: var(--cc-colour-primary);
}

/* /////////////////////////////////////
   SHARED FIELDSETS / LEGENDS
///////////////////////////////////// */

:where(fieldset) {
  margin-block: 0 var(--cc-space-5);
  padding: var(--cc-space-4);
  border: 1px solid var(--cc-colour-border);
  border-radius: var(--cc-radius-md);
}

:where(legend) {
  padding-inline: var(--cc-space-2);
  color: var(--cc-colour-ink-strong);
  font-size: 1rem;
  font-weight: 500;
}