/*
 * Shared Route form-control surface.
 *
 * This layer intentionally owns only color and interaction states. Component
 * geometry (height, width, padding and layout) remains local to each screen.
 */
: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;
}

: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:
    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: 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:
    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 and expose focus there. */
:is(
  .board-search__field,
  .summary-analytics-range,
  .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, select, textarea) {
  background-color: transparent !important;
  box-shadow: none !important;
}

:is(
  .board-search__field,
  .summary-analytics-range,
  .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,
  .summary-analytics-range,
  .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, select, textarea):focus,
:is(
  .board-search__field,
  .summary-analytics-range,
  .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, select, textarea):focus-visible {
  border-color: transparent !important;
  background-color: transparent !important;
  outline: 0 !important;
}

:is(
  .board-search__field,
  .summary-analytics-range,
  .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 {
  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;
}