/*
 * Shared Route form-control surface.
 *
 * This layer owns color and interaction states. D074/D084 ordinary forms opt in to
 * the approved 40px field geometry; other component layouts remain local.
 */
:root {
  --route-field-surface: var(--panel, #ffffff);
  --route-field-border: #cbd6e0;
  --route-field-border-hover: var(--line-strong, #c7d0dc);
  --route-field-focus: var(--accent, #147a6f);
  --route-field-focus-ring: rgba(var(--accent-rgb, 20, 122, 111), .12);
  --route-field-filled-border: var(--route-field-border);
  --route-field-filled-surface: var(--route-field-surface);
  --route-field-error-border: #ca4a41;
  --route-field-error-surface: #fff6f4;
  --route-field-error-ring: rgba(202, 74, 65, .18);
  --route-field-error-focus-ring: rgba(202, 74, 65, .1);
  --route-field-disabled-border: #e0e5eb;
  --route-field-disabled-surface: #f2f4f6;
  --route-field-disabled-text: #98a2af;
  --route-field-placeholder: #7f8b9b;
}

/* D021/D028/D038: one accepted palette/state contract for Task Editor and
   explicitly migrated ordinary forms. Existing form adapters keep their layout. */
:is(.route-form-standard-v1, .route-fields-standard-v1) {
  --route-field-height: 40px;
  --route-field-padding-block: 8px;
  --route-field-surface: #fff;
  --route-field-border: #cbd6e0;
  --route-field-focus: #075d58;
  --route-field-focus-shadow: none;
  --route-field-error-surface: #fff;
  --route-field-error-shadow: none;
  --route-field-error-focus-shadow: none;
  --route-field-disabled-text: #687386;
  --route-menu-hover: #f0f2f4;
  --route-menu-selected: #075d58;
  --route-menu-selected-text: #fff;
  --route-menu-accent: #075d58;
}

/* Only ordinary text/number/date controls. Checkboxes, file inputs and
   composite picker internals do not acquire text-field geometry. */
.route-fields-standard-v1 :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select:not(.route-select--composite)) {
  box-sizing: border-box;
  height: var(--route-field-height);
  min-height: var(--route-field-height);
  padding-block: var(--route-field-padding-block);
}
.route-fields-standard-v1 :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea) {
  background-color: var(--route-field-surface);
  border-color: var(--route-field-border);
}
.route-fields-standard-v1 :is(input, select, textarea):disabled {
  -webkit-text-fill-color: var(--route-field-disabled-text);
}
/* The closed field stays on one line; the opened options wrap below. */
.route-fields-standard-v1 select:not(.route-select--composite):not([multiple]):not([size]) {
  min-inline-size: 0;
  max-inline-size: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@supports (appearance: base-select) and selector(::picker-icon) {
  /* Native selectedcontent gives long labels their own shrinking text box;
     the picker icon remains a separate, non-shrinking flex item. */
  .route-fields-standard-v1 select:not(.route-select--composite):not([multiple]):not([size]) {
    display: flex;
    align-items: center;
  }
  .route-fields-standard-v1 select > button.route-select-label {
    all: unset;
    display: contents;
  }
  .route-fields-standard-v1 select > button.route-select-label > selectedcontent {
    display: block;
    flex: 1 1 0%;
    min-inline-size: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
:is(.route-form-standard-v1, .route-fields-standard-v1) select option:checked::checkmark,
:is(.route-form-standard-v1, .route-fields-standard-v1) select option:checked::before {
  color: var(--route-menu-selected-text) !important;
}
:is(.route-form-standard-v1, .route-fields-standard-v1) select option {
  white-space: normal;
  overflow-wrap: anywhere;
}

:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
) {
  border-radius: var(--radius);
  border-color: var(--route-field-border);
  background-color: var(--route-field-surface);
  box-shadow: none !important;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
):hover:not(:disabled):not([readonly]) {
  border-color: var(--route-field-border-hover);
}

:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
).route-field-is-filled:not(:disabled):not([readonly]) {
  border-color: var(--route-field-filled-border);
  background-color: var(--route-field-filled-surface);
}

:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
):focus,
:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
):focus-visible {
  border-color: var(--route-field-focus) !important;
  background-color: var(--route-field-surface);
  outline: 0 !important;
  box-shadow: var(--route-field-focus-shadow,
    inset 0 0 0 1px var(--route-field-focus),
    0 0 0 3px var(--route-field-focus-ring)) !important;
}

:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
)[aria-invalid="true"],
:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
).is-invalid,
.has-error > :where(input, select, textarea),
.has-error :where(.field-control, .form-control) {
  border-color: var(--route-field-error-border) !important;
  background-color: var(--route-field-error-surface) !important;
  box-shadow: var(--route-field-error-shadow, inset 0 0 0 1px var(--route-field-error-ring)) !important;
}

:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
)[aria-invalid="true"]:focus,
:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
).is-invalid:focus,
.has-error > :where(input, select, textarea):focus {
  border-color: var(--route-field-error-border) !important;
  background-color: var(--route-field-error-surface) !important;
  outline: 0 !important;
  box-shadow: var(--route-field-error-focus-shadow,
    inset 0 0 0 1px var(--route-field-error-ring),
    0 0 0 3px var(--route-field-error-focus-ring)) !important;
}

:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
):is(:disabled, [readonly]) {
  border-color: var(--route-field-disabled-border) !important;
  background-color: var(--route-field-disabled-surface) !important;
  color: var(--route-field-disabled-text) !important;
  box-shadow: none !important;
  cursor: default;
  opacity: 1 !important;
}

:where(input, textarea)::placeholder {
  color: var(--route-field-placeholder);
  opacity: 1;
}

/* Composite controls keep their existing outer frame; shared checkboxes own their surface and focus. */
:is(
  .board-search__field,
  .people-analytics-range,
  .output-analytics-range,
  .profitability-analytics-range,
  .economics-list-toolbar,
  .economics-employee-toolbar,
  .economics-rates-toolbar,
  .outsourcing-acts-control,
  .outsourcing-materials-control
) :where(input:not(.route-checkbox), select, textarea) {
  background-color: transparent !important;
  box-shadow: none !important;
}

:is(
  .board-search__field,
  .people-analytics-range,
  .output-analytics-range,
  .profitability-analytics-range,
  .economics-list-toolbar,
  .economics-employee-toolbar,
  .economics-rates-toolbar,
  .outsourcing-acts-control,
  .outsourcing-materials-control
):has(.route-field-is-filled:not(:disabled):not([readonly])) {
  border-color: var(--route-field-filled-border);
  background-color: var(--route-field-filled-surface);
}

:is(
  .board-search__field,
  .people-analytics-range,
  .output-analytics-range,
  .profitability-analytics-range,
  .economics-list-toolbar,
  .economics-employee-toolbar,
  .economics-rates-toolbar,
  .outsourcing-acts-control,
  .outsourcing-materials-control
) :where(input:not(.route-checkbox), select, textarea):focus,
:is(
  .board-search__field,
  .people-analytics-range,
  .output-analytics-range,
  .profitability-analytics-range,
  .economics-list-toolbar,
  .economics-employee-toolbar,
  .economics-rates-toolbar,
  .outsourcing-acts-control,
  .outsourcing-materials-control
) :where(input:not(.route-checkbox), select, textarea):focus-visible {
  border-color: transparent !important;
  background-color: transparent !important;
  outline: 0 !important;
}

:is(
  .board-search__field,
  .people-analytics-range,
  .output-analytics-range,
  .profitability-analytics-range,
  .economics-list-toolbar,
  .economics-employee-toolbar,
  .economics-rates-toolbar,
  .outsourcing-acts-control,
  .outsourcing-materials-control
):focus-within:where(:not(:has(input.route-checkbox:focus))) {
  border-color: var(--route-field-focus) !important;
  background-color: var(--route-field-surface) !important;
  outline: 0 !important;
  box-shadow:
    inset 0 0 0 1px var(--route-field-focus),
    0 0 0 3px var(--route-field-focus-ring) !important;
}