/* RAVENTA: shared field dimensions for Job Radar and Supply Radar.
   Keep this file byte-identical in both applications. Business logic is unchanged. */
:root {
  --rv-form-column: 23rem;
  --rv-form-text: 47rem;
}

/* Cap short controls even in a wide panel. Text areas retain room for prose. */
:where(.app-shell) main :is(
  input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"],
    [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]),
  select
) {
  box-sizing: border-box;
  min-width: 0;
  max-width: min(100%, var(--rv-field-width, 23rem));
}
:where(.app-shell) main input:is([name="first_name"], [name="last_name"], [name="contact_name"], [name="attendee_name"]) {
  --rv-field-width: 18rem;
}
:where(.app-shell) main input:is([type="tel"], [name="phone"], [name="phone_number"], [name="mobile"], [autocomplete="tel"]) {
  --rv-field-width: 17rem;
}
:where(.app-shell) main input:is([type="email"], [name="email"], [name="attendee_email"]) {
  --rv-field-width: 26rem;
}
:where(.app-shell) main input:is([type="number"], [name="workload"], [name="salary_expectation"]) {
  --rv-field-width: 14rem;
}
:where(.app-shell) main input:is([name="canton"], [name="country"], [name="postal_code"], [name="zip"], [name="currency"]) {
  --rv-field-width: 9rem;
}
:where(.app-shell) main input[type="date"] { --rv-field-width: 14rem; }
:where(.app-shell) main input[type="datetime-local"] { --rv-field-width: 20rem; }
:where(.app-shell) main input:is([type="url"], [type="search"], [name="title"], [name="subject"], [name="q"], [name="location"]) {
  --rv-field-width: 34rem;
}
:where(.app-shell) main textarea {
  box-sizing: border-box;
  min-width: 0;
  max-width: min(100%, var(--rv-form-text));
}
/* Narrow controls must still start below their label, not slip beside it. */
:where(.app-shell) main label > :is(
  input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"],
    [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]),
  select, textarea
) {
  display: block;
}
:where(.app-shell) main form.edit-form[data-entity] {
  max-width: min(100%, 50rem);
}

/* Bounded columns, rather than halves of the entire screen. Nested record
   sections and wide document tables keep their existing outer layout. */
:where(.app-shell) main :is(.form-grid, .cal-form-grid),
:where(.app-shell) main :is(.formgrid, .form-grid, .communication-form) .row:has(> label) {
  grid-template-columns: repeat(2, minmax(0, var(--rv-form-column)));
  column-gap: 16px;
  row-gap: 12px;
  justify-content: start;
}
:where(.app-shell) main :is(.formgrid, .form-grid, .communication-form, .cal-form-grid) :is(label, .field) {
  min-width: 0;
}
:where(.app-shell) main :is(.formgrid, .communication-form) > label:has(> textarea) {
  max-width: var(--rv-form-text);
}

/* Grid items otherwise stretch a short Save button across the whole form. */
:where(.app-shell) main form > :is(button, .btn, .button),
:where(.app-shell) main :is(.formgrid, .form-grid, .communication-form) > :is(button, .btn, .button) {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  align-self: start;
  white-space: normal;
}

/* Do not inherit text-field width, padding or minimum height for checkboxes.
   The associated label remains a generous clickable target. */
:where(.app-shell) main input:is([type="checkbox"], [type="radio"]) {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  padding: 0;
  margin: 0;
  flex: 0 0 16px;
  align-self: center;
}
:where(.app-shell) main label:not([hidden]):has(> input:is([type="checkbox"], [type="radio"])) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  max-width: var(--rv-form-text);
  cursor: pointer;
}

@media (max-width: 700px) {
  :where(.app-shell) main :is(.form-grid, .cal-form-grid),
  :where(.app-shell) main :is(.formgrid, .form-grid, .communication-form) .row:has(> label) {
    grid-template-columns: minmax(0, 1fr);
  }
  :where(.app-shell) main :is(input, select, textarea):not([type="hidden"], [type="checkbox"], [type="radio"]) {
    font-size: 16px;
  }
  :where(.app-shell) main label:not([hidden]):has(> input:is([type="checkbox"], [type="radio"])) {
    min-height: 44px;
  }
}