/**
 * Form Fields Design System
 * Centrale styling voor alle invulvelden in de app
 * 
 * Usage:
 * <div class="field">
 *   <label class="field__label">Label</label>
 *   <div class="field__wrapper">
 *     <input type="text" class="field__input">
 *     <span class="field__suffix">cm</span>
 *   </div>
 * </div>
 */

/* ========================================
   CSS Custom Properties / Design Tokens
   ======================================== */
:root {
  /* Field Colors */
  --field-bg: var(--color-surface, #ffffff);
  --field-bg-readonly: var(--color-surface-alt, #f3f4f6);
  --field-bg-disabled: var(--color-surface-alt, #f3f4f6);
  --field-border: var(--color-border, #d1d5db);
  --field-border-focus: var(--color-primary, #3b82f6);
  --field-border-error: #ef4444;
  --field-text: var(--color-text, #1f2937);
  --field-text-muted: var(--color-text-muted, #6b7280);
  --field-text-placeholder: #9ca3af;
  
  /* Field Spacing */
  --field-padding-y: var(--space-xs, 0.5rem);
  --field-padding-x: var(--space-sm, 0.75rem);
  --field-gap: 0.5rem;
  
  /* Field Sizing */
  --field-border-radius: var(--radius-sm, 0.375rem);
  --field-border-width: 1px;
  --field-font-size: 0.875rem;
  --field-line-height: 1.5;
  
  /* Field Effects */
  --field-transition: all 150ms ease;
  --field-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.1);
  --field-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.1);
  
  /* Collaboration Lock Colors */
  --field-lock-overlay: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] {
  --field-bg: #1f2937;
  --field-bg-readonly: #111827;
  --field-bg-disabled: #111827;
  --field-border: #374151;
  --field-border-focus: #60a5fa;
  --field-text: #e5e7eb;
  --field-text-muted: #9ca3af;
  --field-text-placeholder: #6b7280;
  --field-shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.2);
  --field-lock-overlay: rgba(255, 255, 255, 0.03);
}

/* ========================================
   Base Field Container
   ======================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
  width: 100%;
}

.field--horizontal {
  flex-direction: row;
  align-items: center;
}

.field--inline {
  display: inline-flex;
  width: auto;
}

/* ========================================
   Field Label
   ======================================== */
.field__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--field-text);
  user-select: none;
}

.field__label--required::after {
  content: " *";
  color: var(--field-border-error);
}

.field__label--small {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--field-text-muted);
}

/* ========================================
   Field Wrapper (for suffix/prefix support)
   ======================================== */
.field__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* ========================================
   Field Input (main input element)
   ======================================== */
.field__input,
input.field__input,
textarea.field__input,
select.field__input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--field-padding-y) var(--field-padding-x);
  border: var(--field-border-width) solid var(--field-border);
  border-radius: var(--field-border-radius);
  background: var(--field-bg);
  color: var(--field-text);
  font-size: var(--field-font-size);
  line-height: var(--field-line-height);
  transition: var(--field-transition);
  appearance: none;
}

/* Focus state */
.field__input:focus {
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: var(--field-shadow-focus);
}

/* Placeholder */
.field__input::placeholder {
  color: var(--field-text-placeholder);
  opacity: 1;
}

/* Readonly state */
.field__input:read-only,
.field__input[readonly] {
  background: var(--field-bg-readonly);
  color: var(--field-text-muted);
  cursor: default;
  border-color: var(--field-border);
}

/* Disabled state */
.field__input:disabled,
.field__input[disabled] {
  background: var(--field-bg-disabled);
  color: var(--field-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Error state */
.field--error .field__input,
.field__input--error {
  border-color: var(--field-border-error);
}

.field--error .field__input:focus,
.field__input--error:focus {
  box-shadow: var(--field-shadow-error);
}

/* Textarea specific */
textarea.field__input {
  resize: vertical;
  min-height: 5rem;
}

/* Number input - hide spinners */
input[type="number"].field__input::-webkit-outer-spin-button,
input[type="number"].field__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"].field__input {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ========================================
   Field Suffix / Prefix
   ======================================== */
.field__suffix,
.field__prefix {
  position: absolute;
  pointer-events: none;
  font-size: var(--field-font-size);
  font-weight: 600;
  color: var(--field-text-muted);
  user-select: none;
  z-index: 1;
}

.field__suffix {
  right: var(--field-padding-x);
}

.field__prefix {
  left: var(--field-padding-x);
}

/* Add padding when suffix/prefix present */
.field__wrapper--with-suffix .field__input {
  padding-right: 3rem;
}

.field__wrapper--with-prefix .field__input {
  padding-left: 3rem;
}

/* ========================================
   Field Sizes
   ======================================== */
.field--sm .field__input {
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
}

.field--lg .field__input {
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

/* ========================================
   Field Help Text / Error Message
   ======================================== */
.field__help {
  font-size: 0.75rem;
  color: var(--field-text-muted);
  margin-top: calc(var(--field-gap) * -0.5);
}

.field__error {
  font-size: 0.75rem;
  color: var(--field-border-error);
  margin-top: calc(var(--field-gap) * -0.5);
}

/* ========================================
   Collaboration Lock State
   ======================================== */
.field--locked,
.field__wrapper--locked {
  position: relative;
}

.field--locked .field__input,
.field__wrapper--locked .field__input {
  background: var(--field-bg-readonly);
  cursor: not-allowed;
  position: relative;
}

.field--locked::before,
.field__wrapper--locked::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--field-lock-overlay);
  border-radius: var(--field-border-radius);
  pointer-events: none;
  z-index: 1;
}

/* Collaboration indicator positioning */
.field__wrapper--locked .field-collaboration-indicator,
.field--locked .field-collaboration-indicator {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  z-index: 2;
  pointer-events: none;
}

/* ========================================
   Backwards Compatibility Aliases
   ======================================== */

/* Support old .form-input class as alias to .field__input */
.form-input {
  /* Inherit all .field__input styles via cascade */
  width: 100%;
  box-sizing: border-box;
  padding: var(--field-padding-y) var(--field-padding-x);
  border: var(--field-border-width) solid var(--field-border);
  border-radius: var(--field-border-radius);
  background: var(--field-bg);
  color: var(--field-text);
  font-size: var(--field-font-size);
  line-height: var(--field-line-height);
  transition: var(--field-transition);
}

.form-input:focus {
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: var(--field-shadow-focus);
}

.form-input::placeholder {
  color: var(--field-text-placeholder);
}

.form-input:read-only,
.form-input[readonly] {
  background: var(--field-bg-readonly);
  color: var(--field-text-muted);
  cursor: default;
}

.form-input:disabled {
  background: var(--field-bg-disabled);
  color: var(--field-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.form-input--readonly {
  background: var(--field-bg-readonly);
  color: var(--field-text-muted);
  cursor: default;
}

/* Number input backwards compat */
input[type="number"].form-input::-webkit-outer-spin-button,
input[type="number"].form-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"].form-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Legacy wrapper aliases */
.input-with-suffix {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-with-suffix input {
  flex: 1;
  padding-right: 3rem;
}

.input-suffix {
  position: absolute;
  right: 0.75rem;
  pointer-events: none;
  font-size: var(--field-font-size);
  font-weight: 600;
  color: var(--field-text-muted);
  user-select: none;
}

/* Product field wrappers (product_detail.html) */
.product-field__input {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Financial heading wrapper (financieel_overzicht.html) */
.financial-heading__input {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Product info field (producten.html) */
.product-info-field {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
  width: 100%;
}

/* ========================================
   Collaboration Visual States
   ======================================== */
.field-locked,
.product-field__input.field-locked,
.financial-heading__input.field-locked,
.input-with-suffix.field-locked,
.product-info-field.field-locked,
.searchable-select-wrapper.field-locked {
  position: relative;
  border-radius: var(--field-border-radius);
  box-shadow: 0 0 0 2px var(--lock-color, #4A90E2);
}

/* Collaboration avatar & typing indicator */
.field-collaboration-indicator {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

.field-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: white;
  background: var(--lock-color, #4A90E2);
  user-select: none;
}

.field-typing-indicator {
  display: flex;
  gap: 0.125rem;
  align-items: center;
}

.field-typing-indicator span {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: currentColor;
  animation: typing-bounce 1.4s infinite ease-in-out both;
}

.field-typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.field-typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  40% {
    transform: translateY(-0.25rem);
    opacity: 1;
  }
}

.field-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.field-locked:hover .field-tooltip {
  opacity: 1;
}

/* ========================================
   Utility Classes
   ======================================== */
.field--full-width {
  width: 100%;
}

.field--auto-width {
  width: auto;
}

.field--bordered {
  padding: 1rem;
  border: 1px solid var(--field-border);
  border-radius: var(--field-border-radius);
}