/**
 * RootReal Form Components - Input Styles
 * 
 * Styles for all input components including TextInput, NumberInput,
 * PasswordInput, EmailInput, Textarea, InputMask, AutoComplete, etc.
 */

/* ============================================================================
 * Base Input Styles
 * ========================================================================== */

.rr-textinput,
.rr-numberinput,
.rr-passwordinput,
.rr-emailinput,
.rr-telinput,
.rr-urlinput,
.rr-searchinput,
.rr-dateinput,
.rr-timeinput,
.rr-datetimeinput,
.rr-monthinput,
.rr-weekinput,
.rr-inputmask,
.rr-autocomplete-input {
  width: 100%;
  font-family: var(--rr-font-family);
  font-size: var(--rr-font-size-base);
  line-height: var(--rr-line-height-normal);
  color: var(--rr-gray-900);
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  padding: var(--rr-input-padding-y-base) var(--rr-input-padding-x-base);
  height: var(--rr-input-height-base);
  transition: border-color var(--rr-transition-base),
              box-shadow var(--rr-transition-base);
}

/* Outlined Variant (Default) */
.rr-textinput-outlined,
.rr-numberinput-outlined,
.rr-passwordinput-outlined,
.rr-emailinput-outlined,
.rr-telinput-outlined,
.rr-urlinput-outlined,
.rr-searchinput-outlined,
.rr-dateinput-outlined,
.rr-timeinput-outlined,
.rr-datetimeinput-outlined,
.rr-monthinput-outlined,
.rr-weekinput-outlined,
.rr-inputmask-outlined,
.rr-autocomplete-outlined .rr-autocomplete-input {
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
}

/* Filled Variant */
.rr-textinput-filled,
.rr-numberinput-filled,
.rr-passwordinput-filled,
.rr-emailinput-filled,
.rr-telinput-filled,
.rr-urlinput-filled,
.rr-searchinput-filled,
.rr-dateinput-filled,
.rr-timeinput-filled,
.rr-datetimeinput-filled,
.rr-monthinput-filled,
.rr-weekinput-filled,
.rr-inputmask-filled,
.rr-autocomplete-filled .rr-autocomplete-input {
  background-color: var(--rr-gray-100);
  border: var(--rr-border-width) solid transparent;
  border-bottom-color: var(--rr-gray-400);
  border-radius: var(--rr-radius-md) var(--rr-radius-md) 0 0;
}

/* Size Variants */
.rr-textinput-sm,
.rr-numberinput-sm,
.rr-passwordinput-sm,
.rr-emailinput-sm,
.rr-inputmask-sm {
  height: var(--rr-input-height-sm);
  padding: var(--rr-input-padding-y-sm) var(--rr-input-padding-x-sm);
  font-size: var(--rr-font-size-sm);
}

.rr-textinput-lg,
.rr-numberinput-lg,
.rr-passwordinput-lg,
.rr-emailinput-lg,
.rr-inputmask-lg {
  height: var(--rr-input-height-lg);
  padding: var(--rr-input-padding-y-lg) var(--rr-input-padding-x-lg);
  font-size: var(--rr-font-size-lg);
}

/* Focus State */
.rr-textinput:focus,
.rr-numberinput:focus,
.rr-passwordinput:focus,
.rr-emailinput:focus,
.rr-inputmask:focus,
.rr-autocomplete-input:focus {
  outline: none;
  border-color: var(--rr-primary-500);
  box-shadow: var(--rr-shadow-focus);
}

/* Hover State */
.rr-textinput:hover:not(:disabled),
.rr-numberinput:hover:not(:disabled),
.rr-passwordinput:hover:not(:disabled),
.rr-emailinput:hover:not(:disabled),
.rr-inputmask:hover:not(:disabled) {
  border-color: var(--rr-gray-400);
}

/* Disabled State */
.rr-textinput:disabled,
.rr-numberinput:disabled,
.rr-passwordinput:disabled,
.rr-emailinput:disabled,
.rr-inputmask:disabled,
.rr-textinput-disabled,
.rr-numberinput-disabled,
.rr-passwordinput-disabled,
.rr-emailinput-disabled,
.rr-inputmask-disabled {
  opacity: var(--rr-disabled-opacity);
  cursor: var(--rr-disabled-cursor);
  background-color: var(--rr-gray-100);
}

/* Invalid State */
.rr-textinput-invalid,
.rr-numberinput-invalid,
.rr-passwordinput-invalid,
.rr-emailinput-invalid,
.rr-inputmask-invalid {
  border-color: var(--rr-danger-500);
}

.rr-textinput-invalid:focus,
.rr-numberinput-invalid:focus,
.rr-passwordinput-invalid:focus,
.rr-emailinput-invalid:focus,
.rr-inputmask-invalid:focus {
  box-shadow: 0 0 0 3px rgb(239 68 68 / 0.5);
}

/* Valid State */
.rr-textinput-valid,
.rr-numberinput-valid,
.rr-passwordinput-valid,
.rr-emailinput-valid,
.rr-inputmask-valid {
  border-color: var(--rr-success-500);
}

/* ============================================================================
 * Float/Ifta Label Styles
 * ========================================================================== */

.rr-float-label,
.rr-ifta-label {
  position: relative;
  display: block;
  width: 100%;
}

.rr-float-label > label,
.rr-ifta-label > label {
  display: block;
  color: var(--rr-gray-500);
  transition: color var(--rr-transition-fast),
              transform var(--rr-transition-fast);
}

.rr-float-label-over > label,
.rr-float-label-in > label,
.rr-float-label-on > label {
  margin-bottom: var(--rr-spacing-1);
  font-size: var(--rr-font-size-sm);
  font-weight: var(--rr-font-weight-medium);
}

.rr-ifta-label {
  padding-top: var(--rr-spacing-2);
}

.rr-ifta-label > label {
  position: absolute;
  top: 0;
  left: var(--rr-spacing-3);
  padding: 0 var(--rr-spacing-1);
  background: white;
  font-size: var(--rr-font-size-xs);
  font-weight: var(--rr-font-weight-semibold);
  letter-spacing: 0.01em;
}

.rr-ifta-label-invalid > label,
.rr-float-label-invalid > label {
  color: var(--rr-danger-600);
}

/* ============================================================================
 * NumberInput Styles
 * ========================================================================== */

[data-rr-component="number-input"] {
  --rr-number-input-gap: var(--rr-spacing-2);
  --rr-number-input-button-size: calc(var(--rr-input-height-base) - var(--rr-spacing-2));
  --rr-number-input-button-bg: var(--rr-gray-50);
  --rr-number-input-button-border: var(--rr-gray-200);
  --rr-number-input-button-color: var(--rr-gray-600);
  --rr-number-input-button-hover-bg: var(--rr-gray-100);
  --rr-number-input-button-hover-color: var(--rr-gray-800);
  --rr-number-input-clear-size: calc(var(--rr-input-height-base) - var(--rr-spacing-4));
  display: inline-flex;
  align-items: center;
  gap: var(--rr-number-input-gap);
  min-width: 0;
}

[data-rr-component="number-input"][data-rr-fluid="true"] {
  width: 100%;
}

[data-rr-component="number-input"] [data-rr-part="prefix"],
[data-rr-component="number-input"] [data-rr-part="suffix"] {
  color: var(--rr-gray-500);
  font-size: var(--rr-font-size-sm);
  white-space: nowrap;
}

[data-rr-component="number-input"] [data-rr-part="content"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.rr-input-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  appearance: textfield;
}

@supports (field-sizing: content) {
  [data-rr-component="number-input"][data-rr-fluid="false"] .rr-input-number {
    field-sizing: content;
  }
}

[data-rr-component="number-input"][data-rr-show-clear="true"][data-rr-filled="true"] .rr-input-number {
  padding-right: calc(var(--rr-number-input-clear-size) + var(--rr-spacing-4));
}

[data-rr-component="number-input"] [data-rr-part="buttons"] {
  display: inline-flex;
  gap: var(--rr-spacing-1);
}

[data-rr-component="number-input"] [data-rr-part="scrub-area"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--rr-number-input-button-size);
  min-height: var(--rr-number-input-button-size);
  padding: 0;
  border-radius: var(--rr-radius-base);
  border: var(--rr-border-width) dashed var(--rr-number-input-button-border);
  background: var(--rr-gray-50);
  color: var(--rr-gray-500);
  cursor: ew-resize;
  transition: background-color var(--rr-transition-fast),
              color var(--rr-transition-fast),
              border-color var(--rr-transition-fast);
}

[data-rr-component="number-input"] [data-rr-part="scrub-area"]:hover {
  background: var(--rr-number-input-button-hover-bg);
  color: var(--rr-number-input-button-hover-color);
}

[data-rr-component="number-input"][data-rr-scrubbing="true"] [data-rr-part="scrub-area"] {
  background: var(--rr-primary-100);
  border-color: var(--rr-primary-400);
  color: var(--rr-primary-700);
}

[data-rr-component="number-input"][data-rr-layout="stacked"] [data-rr-part="buttons"],
[data-rr-component="number-input"][data-rr-layout="vertical"] [data-rr-part="buttons"] {
  flex-direction: column;
}

[data-rr-component="number-input"][data-rr-layout="horizontal"] [data-rr-part="buttons"] {
  flex-direction: row;
}

[data-rr-component="number-input"] .rr-input-number-button,
[data-rr-component="number-input"] .rr-input-number-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rr-radius-base);
  border: var(--rr-border-width) solid var(--rr-number-input-button-border);
  background: var(--rr-number-input-button-bg);
  color: var(--rr-number-input-button-color);
  transition: background-color var(--rr-transition-fast),
              color var(--rr-transition-fast),
              border-color var(--rr-transition-fast);
}

[data-rr-component="number-input"] .rr-input-number-button {
  min-width: var(--rr-number-input-button-size);
  min-height: var(--rr-number-input-button-size);
  padding: 0;
}

[data-rr-component="number-input"] .rr-input-number-clear {
  position: absolute;
  right: var(--rr-spacing-2);
  top: 50%;
  width: var(--rr-number-input-clear-size);
  height: var(--rr-number-input-clear-size);
  padding: 0;
  transform: translateY(-50%);
  z-index: 1;
}

[data-rr-component="number-input"] .rr-input-number-button:hover:not(:disabled),
[data-rr-component="number-input"] .rr-input-number-clear:hover:not(:disabled) {
  background: var(--rr-number-input-button-hover-bg);
  color: var(--rr-number-input-button-hover-color);
}

[data-rr-component="number-input"] .rr-input-number-button:disabled,
[data-rr-component="number-input"] .rr-input-number-clear:disabled {
  opacity: var(--rr-disabled-opacity);
  cursor: var(--rr-disabled-cursor);
}

[data-rr-component="number-input"][data-rr-invalid="true"] {
  --rr-number-input-button-border: var(--rr-danger-300);
  --rr-number-input-button-color: var(--rr-danger-600);
}

[data-rr-component="number-input"][data-rr-focused="true"] .rr-input-number {
  border-color: var(--rr-primary-500);
  box-shadow: var(--rr-shadow-focus);
}

@media (forced-colors: active) {
  [data-rr-component="number-input"] {
    --rr-number-input-button-bg: ButtonFace;
    --rr-number-input-button-border: CanvasText;
    --rr-number-input-button-color: ButtonText;
    --rr-number-input-button-hover-bg: Highlight;
    --rr-number-input-button-hover-color: HighlightText;
  }

  [data-rr-component="number-input"] .rr-input-number,
  [data-rr-component="number-input"] .rr-input-number-button,
  [data-rr-component="number-input"] .rr-input-number-clear {
    forced-color-adjust: auto;
  }
}

/* ============================================================================
 * Textarea Styles
 * ========================================================================== */

.rr-textarea {
  width: 100%;
  font-family: var(--rr-font-family);
  font-size: var(--rr-font-size-base);
  line-height: var(--rr-line-height-normal);
  color: var(--rr-gray-900);
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  padding: var(--rr-input-padding-y-base) var(--rr-input-padding-x-base);
  min-height: 5rem;
  resize: vertical;
  transition: border-color var(--rr-transition-base),
              box-shadow var(--rr-transition-base);
}

.rr-textarea:focus {
  outline: none;
  border-color: var(--rr-primary-500);
  box-shadow: var(--rr-shadow-focus);
}

.rr-textarea-counter {
  display: block;
  margin-top: var(--rr-spacing-1);
  font-size: var(--rr-font-size-sm);
  color: var(--rr-gray-500);
  text-align: right;
}

/* ============================================================================
 * AutoComplete Styles
 * ========================================================================== */

.rr-autocomplete {
  position: relative;
  width: 100%;
}

.rr-autocomplete-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--rr-spacing-1);
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-lg);
  max-height: 15rem;
  overflow-y: auto;
  z-index: var(--rr-z-index-dropdown);
}

.rr-autocomplete-item {
  padding: var(--rr-spacing-2) var(--rr-spacing-3);
  cursor: pointer;
  transition: background-color var(--rr-transition-fast);
}

.rr-autocomplete-item:hover,
.rr-autocomplete-item-highlighted {
  background-color: var(--rr-gray-100);
}

.rr-autocomplete-item-disabled {
  opacity: var(--rr-disabled-opacity);
  cursor: var(--rr-disabled-cursor);
}

/* ============================================================================
 * Chips Styles
 * ========================================================================== */

.rr-chips {
  width: 100%;
}

.rr-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-spacing-2);
  padding: var(--rr-spacing-2);
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  min-height: var(--rr-input-height-base);
  list-style: none;
  margin: 0;
}

.rr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rr-spacing-1);
  padding: var(--rr-spacing-1) var(--rr-spacing-2);
  background-color: var(--rr-primary-100);
  color: var(--rr-primary-700);
  border-radius: var(--rr-radius-base);
  font-size: var(--rr-font-size-sm);
}

.rr-chip-text {
  line-height: 1;
}

.rr-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--rr-primary-700);
  cursor: pointer;
  border-radius: var(--rr-radius-full);
  transition: background-color var(--rr-transition-fast);
}

.rr-chip-remove:hover {
  background-color: var(--rr-primary-200);
}

.rr-chips-input-wrapper {
  flex: 1;
  min-width: 8rem;
}

.rr-chips-input {
  width: 100%;
  border: none;
  outline: none;
  padding: var(--rr-spacing-1);
  font-size: var(--rr-font-size-base);
  background: transparent;
}

/* ============================================================================
 * Rating Styles
 * ========================================================================== */

.rr-rating {
  display: inline-flex;
  gap: var(--rr-spacing-1);
  padding: var(--rr-spacing-2);
}

.rr-rating-star {
  font-size: var(--rr-font-size-2xl);
  color: var(--rr-gray-300);
  cursor: pointer;
  transition: color var(--rr-transition-fast),
              transform var(--rr-transition-fast);
  user-select: none;
}

.rr-rating-star:hover {
  transform: scale(1.1);
}

.rr-rating-star-full,
.rr-rating-star-half {
  color: var(--rr-warning-500);
}

.rr-rating-disabled .rr-rating-star,
.rr-rating-readonly .rr-rating-star {
  cursor: default;
}

.rr-rating-disabled .rr-rating-star:hover,
.rr-rating-readonly .rr-rating-star:hover {
  transform: none;
}

/* ============================================================================
 * Knob Styles
 * ========================================================================== */

.rr-knob {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--rr-spacing-2);
  user-select: none;
}

.rr-knob-svg {
  display: block;
}

.rr-knob:focus {
  outline: var(--rr-focus-ring-width) solid var(--rr-focus-ring-color);
  outline-offset: var(--rr-focus-ring-offset);
  border-radius: var(--rr-radius-full);
}

.rr-knob-disabled {
  opacity: var(--rr-disabled-opacity);
  cursor: var(--rr-disabled-cursor);
}

/* ============================================================================
 * ColorPicker Styles
 * ========================================================================== */

.rr-colorpicker {
  position: relative;
  width: 100%;
}

.rr-colorpicker-input-wrapper {
  display: flex;
  gap: var(--rr-spacing-2);
  align-items: center;
}

.rr-colorpicker-swatch {
  width: 2.5rem;
  height: 2.5rem;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  cursor: pointer;
  transition: border-color var(--rr-transition-base);
}

.rr-colorpicker-swatch:hover:not(:disabled) {
  border-color: var(--rr-gray-400);
}

.rr-colorpicker-input {
  flex: 1;
  font-family: var(--rr-font-family-mono);
}

.rr-colorpicker-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--rr-spacing-2);
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-lg);
  padding: var(--rr-spacing-3);
  z-index: var(--rr-z-index-dropdown);
  max-width: 100%;
  overflow: hidden;
}

.rr-colorpicker-inline .rr-colorpicker-panel {
  position: static;
  box-shadow: none;
  border: none;
  padding: 0;
  margin-top: 8px;
}

.rr-colorpicker-palette {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--rr-spacing-2);
}

.rr-colorpicker-palette-color {
  width: 2rem;
  height: 2rem;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-base);
  cursor: pointer;
  transition: transform var(--rr-transition-fast),
              box-shadow var(--rr-transition-fast);
}

.rr-colorpicker-palette-color:hover {
  transform: scale(1.1);
  box-shadow: var(--rr-shadow-md);
}

.rr-colorpicker-palette-color-selected {
  border-width: var(--rr-border-width-2);
  border-color: var(--rr-primary-500);
  box-shadow: var(--rr-shadow-focus);
}

.rr-colorpicker-recent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rr-gray-200, #e5e7eb);
}

.rr-colorpicker-recent-label {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--rr-gray-400, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.rr-colorpicker-recent-swatches {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.rr-colorpicker-recent-color {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================================================
 * SearchInput - Text input with search icon
 * ========================================================================== */

.rr-searchinput-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.rr-searchinput {
  padding-left: var(--rr-spacing-10);
}

.rr-searchinput-icon {
  position: absolute;
  left: var(--rr-spacing-3);
  color: var(--rr-gray-500);
  pointer-events: none;
}

.rr-searchinput-clear {
  position: absolute;
  right: var(--rr-spacing-3);
  color: var(--rr-gray-500);
  cursor: pointer;
  padding: var(--rr-spacing-1);
  border-radius: var(--rr-radius-base);
  transition: color var(--rr-transition-fast),
              background-color var(--rr-transition-fast);
}

.rr-searchinput-clear:hover {
  color: var(--rr-gray-700);
  background-color: var(--rr-gray-100);
}

/* ============================================================================
 * ColorInput - Color input with picker
 * ========================================================================== */

.rr-colorinput {
  display: inline-flex;
  align-items: center;
  gap: var(--rr-spacing-2);
}

.rr-colorinput-swatch {
  width: 2.5rem;
  height: 2.5rem;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  cursor: pointer;
  transition: transform var(--rr-transition-fast),
              box-shadow var(--rr-transition-fast);
}

.rr-colorinput-swatch:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: var(--rr-shadow-md);
}

.rr-colorinput-swatch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rr-colorinput-input {
  flex: 1;
  font-family: var(--rr-font-family-mono);
  text-transform: uppercase;
}

/* ============================================================================
 * HiddenInput - Hidden input (no visual styles needed)
 * ========================================================================== */

.rr-hiddeninput {
  display: none;
}

/* ============================================================================
 * RangeInput - Range slider input
 * ========================================================================== */

.rr-rangeinput {
  width: 100%;
  height: var(--rr-input-height-base);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.rr-rangeinput::-webkit-slider-track {
  width: 100%;
  height: 0.5rem;
  background: var(--rr-gray-200);
  border-radius: var(--rr-radius-full);
}

.rr-rangeinput::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--rr-primary-500);
  border-radius: var(--rr-radius-full);
  cursor: pointer;
  margin-top: -0.375rem;
  transition: background-color var(--rr-transition-fast),
              transform var(--rr-transition-fast);
}

.rr-rangeinput::-webkit-slider-thumb:hover {
  background: var(--rr-primary-600);
  transform: scale(1.1);
}

.rr-rangeinput::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  background: var(--rr-gray-200);
  border-radius: var(--rr-radius-full);
}

.rr-rangeinput::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--rr-primary-500);
  border: none;
  border-radius: var(--rr-radius-full);
  cursor: pointer;
  transition: background-color var(--rr-transition-fast),
              transform var(--rr-transition-fast);
}

.rr-rangeinput::-moz-range-thumb:hover {
  background: var(--rr-primary-600);
  transform: scale(1.1);
}

.rr-rangeinput:focus {
  outline: none;
}

.rr-rangeinput:focus::-webkit-slider-thumb {
  box-shadow: var(--rr-shadow-focus);
}

.rr-rangeinput:focus::-moz-range-thumb {
  box-shadow: var(--rr-shadow-focus);
}

.rr-rangeinput:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}