/**
 * File: /shared/css/forms.css
 * Purpose: Shared form-control normalization, input utilities, and validation icon positioning.
 *
 * Defines reusable form presentation and browser normalization
 * across the Signs Platform.
 *
 * Brand-specific visual values are supplied through CSS custom properties.
 * Modal-specific form presentation belongs in /shared/css/modal.css.
 *
 * Dependencies:
 * - /shared/css/tokens.css
 * - /brand/{brand}/css/tokens.css
 *
 * This file must not contain:
 * - Hard-coded brand-specific colors
 * - Modal-specific presentation
 * - Page-specific form styling
 * - Form validation business logic
 */


/* ==========================================
   SELECT CONTROLS
   ========================================== */

/*
 * Normalize select presentation and remove browser/framework
 * focus decoration where the application provides its own
 * surrounding control presentation.
 */
 select,
 select:focus {
     background-color: var(--color-surface);
 
     border: none;
     outline: none;
     box-shadow: none;
 }
 
 
 /* ==========================================
    BROWSER AUTOFILL
    ========================================== */
 
 /*
  * Prevent WebKit autofill from replacing the application's
  * input background with the browser's default autofill color.
  */
 input:-webkit-autofill {
     -webkit-box-shadow:
         0 0 0 1000px var(--color-surface) inset;
 }
 
 
 /* ==========================================
    INPUT ICON CONTAINER
    ========================================== */
 
 /*
  * Inputs that contain reset or validation icons require a
  * positioned parent so the icons can be anchored correctly.
  *
  * .position-relative itself is defined in:
  * /shared/css/global.css
  */
 .position-relative input.form-control {
     padding-right: 60px;
 }
 
 
 /* ==========================================
    INPUT ACTION / STATUS ICONS
    ========================================== */
 
 .position-relative .reset-icon,
 .position-relative .error-icon {
     position: absolute;
     top: 50%;
     right: 20px;
 
     transform: translateY(-50%);
 
     color: var(--color-text-placeholder);
     cursor: pointer;
 }
 
 
 /*
  * Error icons are positioned separately so reset and error
  * controls can coexist within the same input container.
  */
 .position-relative .error-icon {
     right: 35px;
     color: var(--color-error);
 }