/*
 * Omnx Flow — form controls (component sheet)
 * ---------------------------------------------------------------------------
 * Port of the etcX approved v2 form spec (v2/forms.css), unscoped and
 * token-native. One chrome for every text input / number input / select /
 * textarea, driven by the --form-* control tokens:
 *   bg     var(--form-bg)        border   1px solid var(--form-border)
 *   text   var(--form-text)      radius   var(--form-radius)
 *   pad    var(--form-pad-y) var(--form-pad-x)
 *   hover  border var(--form-border-hover)
 *   focus  border var(--form-focus) + a VISIBLE ring (never bare outline:none)
 * Plus: ONE tokenised select chevron, number-spinner reset, dark date pickers.
 */

/* ---------------------------------------------------------------------------
 * .form-input / .form-select / .form-textarea — the canonical base controls.
 * --------------------------------------------------------------------------- */
.form-input,
.form-select,
.form-textarea {
  background: var(--form-bg);
  color: var(--form-text);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  padding: var(--form-pad-y) var(--form-pad-x);
  font-size: var(--text-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--form-border-hover);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--form-focus);
  box-shadow: 0 0 0 2px var(--status-info-bg);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--form-placeholder);
}
.form-select option {
  background: var(--md-sys-color-surface-container-high);
  color: var(--form-text);
}

/* ---------------------------------------------------------------------------
 * .filter-input — the filters-section selects + date/text inputs (the etcX
 * dashboard/finance filter control), converged onto the same form chrome per
 * the v2 spec.
 * --------------------------------------------------------------------------- */
.filter-input {
  background: var(--form-bg);
  color: var(--form-text);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  padding: var(--form-pad-y) var(--form-pad-x);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.filter-input:hover {
  border-color: var(--form-border-hover);
}
.filter-input:focus {
  outline: none;
  border-color: var(--form-focus);
  background: var(--form-bg);
  box-shadow: 0 0 0 2px var(--status-info-bg);
}
.filter-input::placeholder {
  color: var(--form-placeholder);
}

/* ---------------------------------------------------------------------------
 * Form field labels — the etcX filter-group label treatment (12px uppercase).
 * --------------------------------------------------------------------------- */
.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---------------------------------------------------------------------------
 * File input — native picker restyled to the same chrome; the browse button
 * reads as a compact tinted ghost.
 * --------------------------------------------------------------------------- */
.form-file {
  background: var(--form-bg);
  color: var(--form-text);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  padding: var(--form-pad-y) var(--form-pad-x);
  font-size: var(--text-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-file:hover {
  border-color: var(--form-border-hover);
}
.form-file:focus {
  outline: none;
  border-color: var(--form-focus);
  box-shadow: 0 0 0 2px var(--status-info-bg);
}
.form-file::file-selector-button {
  background: var(--accent-tint-10);
  border: 1px solid var(--accent-tint-20);
  border-radius: var(--radius-xs);
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--spacing-xs) var(--space-12);
  margin-right: var(--spacing-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.form-file::file-selector-button:hover {
  background: var(--accent-tint-20);
  border-color: var(--accent-tint-40);
}

/* ===========================================================================
 * Unified <select> arrow — ONE tokenised chevron data-URI tinted to the
 * primary accent, applied to every styled select. Native appearance removed
 * so only this single arrow shows.
 * JUSTIFIED EXCEPTION: the stroke colour inside the data-URI is a URL-encoded
 * literal — CSS var() cannot reach inside a url() literal. It is the NEUTRAL
 * secondary text grey (%23a3a9b1), not the accent, so one chevron reads in
 * both themes and a select never looks like a primary action.
 * =========================================================================== */
select.form-select,
select.filter-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3a9b1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-sm) center;
  padding-right: calc(var(--form-pad-x) + var(--spacing-md));
  cursor: pointer;
}

/* ===========================================================================
 * Number-input spinner reset — strip the native up/down spinners consistently.
 * =========================================================================== */
.form-input[type="number"]::-webkit-outer-spin-button,
.form-input[type="number"]::-webkit-inner-spin-button,
.filter-input[type="number"]::-webkit-outer-spin-button,
.filter-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-input[type="number"],
.filter-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ===========================================================================
 * Dark date-picker indicator on the tokenised inputs (base.css covers the
 * unclassed native inputs; this keeps the classed ones explicit).
 * =========================================================================== */
.form-input[type="date"],
.filter-input[type="date"] {
  color-scheme: inherit;
}
.form-input[type="date"]::-webkit-calendar-picker-indicator,
.filter-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}
:root[data-theme="light"] .form-input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] .filter-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
}