/**
 * Unified panel text controls — matches Flow Blocks UI (Tailwind equivalent).
 * Load after component CSS so legacy per-page input classes are normalized.
 */

:root {
  --panel-control-bg: rgba(17, 24, 39, 0.6);
  --panel-control-border: rgb(31 41 55);
  --panel-control-text: rgb(229 231 235);
  --panel-control-placeholder: rgb(156 163 175);
  --panel-control-focus-border: rgb(6 182 212);
  --panel-control-focus-ring: rgba(6, 182, 212, 0.3);
  --panel-control-radius: 0.5rem;
  --panel-control-padding-x: 0.75rem;
  --panel-control-padding-y: 0.5rem;
  --panel-control-min-height: 2.5rem;
  --panel-control-font-size: 0.875rem;
  --panel-control-line-height: 1.5;
}

/* Explicit utility (Flow Blocks JS, markup) */
.panel-control,
.panel-input,
.flow-field-block input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.flow-field-block select,
.flow-field-block textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--panel-control-min-height);
  padding: var(--panel-control-padding-y) var(--panel-control-padding-x);
  border-radius: var(--panel-control-radius);
  border: 1px solid var(--panel-control-border);
  background-color: var(--panel-control-bg);
  color: var(--panel-control-text);
  font-size: var(--panel-control-font-size);
  line-height: var(--panel-control-line-height);
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.panel-control::placeholder,
.panel-input::placeholder,
.flow-field-block input::placeholder,
.flow-field-block textarea::placeholder {
  color: var(--panel-control-placeholder);
}

.panel-control:focus,
.panel-input:focus,
.flow-field-block input:focus,
.flow-field-block select:focus,
.flow-field-block textarea:focus {
  outline: none;
  border-color: var(--panel-control-focus-border);
  box-shadow: 0 0 0 2px var(--panel-control-focus-ring);
}

.panel-control:is(textarea),
.panel-input:is(textarea),
.flow-field-block textarea {
  min-height: 5.5rem;
  resize: vertical;
}

/* Global normalization — overrides scattered Tailwind / legacy input classes */
:is(.dashboard-shell, .dashboard-panel, #admin-shell, body) :is(
    input:not(.sr-only):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
    select:not(.sr-only),
    textarea:not(.sr-only)
  ) {
  box-sizing: border-box;
  min-height: var(--panel-control-min-height);
  padding: var(--panel-control-padding-y) var(--panel-control-padding-x) !important;
  border-radius: var(--panel-control-radius) !important;
  border: 1px solid var(--panel-control-border) !important;
  background-color: var(--panel-control-bg) !important;
  color: var(--panel-control-text) !important;
  font-size: var(--panel-control-font-size) !important;
  line-height: var(--panel-control-line-height) !important;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

:is(.dashboard-shell, .dashboard-panel, #admin-shell, body) :is(input, textarea)::placeholder {
  color: var(--panel-control-placeholder) !important;
}

:is(.dashboard-shell, .dashboard-panel, #admin-shell, body) :is(
    input:not(.sr-only):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
    select:not(.sr-only),
    textarea:not(.sr-only)
  ):focus {
  outline: none !important;
  border-color: var(--panel-control-focus-border) !important;
  box-shadow: 0 0 0 2px var(--panel-control-focus-ring) !important;
}

:is(.dashboard-shell, .dashboard-panel, #admin-shell, body) textarea:not(.sr-only) {
  min-height: 5.5rem;
  resize: vertical;
}

/* Compact controls in dense toolbars still keep horizontal padding */
.toolbar-search input:not([type="checkbox"]):not([type="radio"]),
.flow-inline-field input:not([type="checkbox"]):not([type="radio"]),
.flow-palette__search input:not([type="checkbox"]):not([type="radio"]),
.api-calls-hub__search input:not([type="checkbox"]):not([type="radio"]) {
  min-height: var(--panel-control-min-height);
}

/* Scrollable filter / list panels wrapping inputs */
:is(.dashboard-panel, #admin-shell) :is(
    [class*="overflow-y-auto"],
    [class*="overflow-auto"],
    .flow-block-content,
    .flow-modal__body
  ) :is(input, select, textarea):not(.sr-only):not([type="checkbox"]):not([type="radio"]) {
  padding: var(--panel-control-padding-y) var(--panel-control-padding-x) !important;
}

/* Number inputs — preserve spinner room */
:is(.dashboard-shell, .dashboard-panel, #admin-shell, body) input[type="number"]:not(.sr-only) {
  padding-right: 1.75rem !important;
}

/* File inputs — layout only; button styling stays in site.css */
:is(.dashboard-shell, .dashboard-panel, #admin-shell, body) input[type="file"]:not(.sr-only) {
  padding: 0.375rem 0.5rem !important;
  min-height: var(--panel-control-min-height);
}