/*
 * ═══════════════════════════════════════════════════════════
 * Lions.dev - Form Field Component Styles
 * ═══════════════════════════════════════════════════════════
 * Amélioration visuelle complète des champs de formulaire avec identité Lions.dev
 *
 * Version: 1.0.0
 * Date: 1er Janvier 2026
 * Author: Lions Development Team
 * Priority: CRITIQUE #5-8
 * ═══════════════════════════════════════════════════════════
 */

@import '../variables';
@import '../mixins';

// ============================================
// 🎯 BASE FIELD STYLES
// ============================================

.field {
  margin-bottom: $lions-spacing-6;

  &:last-child {
    margin-bottom: 0;
  }
}

// ============================================
// 🏷️ LABEL STYLES
// ============================================

.ui-outputlabel,
label {
  display: block;
  margin-bottom: $lions-spacing-2;
  @include lions-font-size('sm');
  @include lions-font-weight('semibold');
  color: $lions-text-primary;

  // Required indicator (red asterisk)
  .p-error {
    color: $lions-danger-500;
    margin-left: 2px;
  }
}

// ============================================
// 📝 INPUT TEXT BASE STYLES
// ============================================

.ui-inputtext,
.ui-inputfield {
  @include lions-input-base;
  @include lions-input-size('base');

  // Override PrimeFaces defaults
  font-family: $lions-font-family-primary !important;
}

// ============================================
// 📏 INPUT SIZES
// ============================================

// Small inputs
.ui-inputtext.ui-inputtext-sm,
.ui-inputfield.ui-inputfield-sm,
.field-sm .ui-inputtext,
.field-sm .ui-inputfield {
  @include lions-input-size('sm');
}

// Large inputs
.ui-inputtext.ui-inputtext-lg,
.ui-inputfield.ui-inputfield-lg,
.field-lg .ui-inputtext,
.field-lg .ui-inputfield {
  @include lions-input-size('lg');
}

// ============================================
// ✅ INPUT STATES
// ============================================

// Success state (valid input)
.ui-inputtext.ui-state-valid,
.ui-inputfield.ui-state-valid {
  @include lions-input-state-success;
}

// Error state (invalid input)
.ui-inputtext.ui-state-error,
.ui-inputfield.ui-state-error,
.ui-inputtext.ui-state-invalid,
.ui-inputfield.ui-state-invalid {
  @include lions-input-state-error;
}

// ============================================
// 📝 TEXTAREA STYLES
// ============================================

.ui-inputtextarea {
  @include lions-input-base;
  min-height: 80px;
  padding: $lions-input-padding-y $lions-input-padding-x;
  resize: vertical;
  line-height: $lions-line-height-normal;

  // Size variants
  &.ui-inputtextarea-sm {
    @include lions-font-size('sm');
    padding: $lions-spacing-2 $lions-spacing-3;
  }

  &.ui-inputtextarea-lg {
    @include lions-font-size('lg');
    padding: $lions-spacing-4 $lions-spacing-5;
  }

  // States
  &.ui-state-error {
    @include lions-input-state-error;
  }

  &.ui-state-valid {
    @include lions-input-state-success;
  }
}

// ============================================
// 🔽 SELECT / DROPDOWN STYLES
// ============================================

.ui-selectonemenu {
  width: 100%;

  .ui-selectonemenu-trigger {
    @include lions-flex-center;
    background: $lions-gray-50;
    border-left: 1px solid $lions-gray-300;
    width: $lions-button-height-base;
    color: $lions-gray-600;
    @include lions-transition();

    &:hover {
      background: $lions-gray-100;
      color: $lions-blue-500;
    }
  }

  .ui-selectonemenu-label {
    @include lions-input-base;
    @include lions-input-size('base');
    border-radius: $lions-radius-base 0 0 $lions-radius-base !important;
  }

  &.ui-state-focus {
    .ui-selectonemenu-label {
      outline: none;
      border-color: $lions-blue-500;
      box-shadow: 0 0 0 3px rgba($lions-blue-500, 0.15);
    }

    .ui-selectonemenu-trigger {
      border-color: $lions-blue-500;
    }
  }

  &.ui-state-error {
    .ui-selectonemenu-label {
      @include lions-input-state-error;
      border-radius: $lions-radius-base 0 0 $lions-radius-base !important;
    }

    .ui-selectonemenu-trigger {
      border-color: $lions-danger-500;
    }
  }

  // Size variants
  &.ui-selectonemenu-sm {
    .ui-selectonemenu-label {
      @include lions-input-size('sm');
    }

    .ui-selectonemenu-trigger {
      width: $lions-button-height-sm;
    }
  }

  &.ui-selectonemenu-lg {
    .ui-selectonemenu-label {
      @include lions-input-size('lg');
    }

    .ui-selectonemenu-trigger {
      width: $lions-button-height-lg;
    }
  }
}

// Dropdown panel
.ui-selectonemenu-panel {
  border: 1px solid $lions-gray-300;
  @include lions-rounded('md');
  @include lions-shadow('lg');
  background: $lions-white;
  margin-top: $lions-spacing-1;

  .ui-selectonemenu-items {
    padding: $lions-spacing-1 0;

    .ui-selectonemenu-item {
      padding: $lions-spacing-3 $lions-spacing-4;
      color: $lions-text-primary;
      @include lions-transition();
      cursor: pointer;

      &:hover,
      &.ui-state-highlight {
        background: rgba($lions-blue-50, 0.8);
        color: $lions-blue-700;
      }

      &.ui-state-highlight {
        @include lions-font-weight('semibold');
      }
    }
  }

  .ui-selectonemenu-filter-container {
    padding: $lions-spacing-2;
    border-bottom: 1px solid $lions-gray-200;

    .ui-selectonemenu-filter {
      @include lions-input-base;
      @include lions-input-size('sm');
      width: 100%;
    }
  }
}

// ============================================
// 🔒 PASSWORD INPUT STYLES
// ============================================

.ui-password {
  width: 100%;

  .ui-inputtext {
    width: 100%;
  }

  // Password strength meter
  .ui-password-panel {
    background: $lions-white;
    border: 1px solid $lions-gray-300;
    @include lions-rounded('md');
    @include lions-shadow('md');
    padding: $lions-spacing-4;
    margin-top: $lions-spacing-2;

    .ui-password-meter {
      height: 8px;
      background: $lions-gray-200;
      @include lions-rounded('full');
      overflow: hidden;
      margin-bottom: $lions-spacing-3;

      .ui-password-strength {
        height: 100%;
        @include lions-transition(width);

        &.weak {
          width: 33%;
          background: $lions-danger-500;
        }

        &.medium {
          width: 66%;
          background: $lions-warning-500;
        }

        &.strong {
          width: 100%;
          background: $lions-success-500;
        }
      }
    }

    .ui-password-info {
      @include lions-font-size('xs');
      color: $lions-text-secondary;
      margin-top: $lions-spacing-2;
    }
  }
}

// ============================================
// 📅 CALENDAR / DATE PICKER STYLES
// ============================================

.ui-calendar {
  .ui-inputtext {
    width: 100%;
  }

  .ui-datepicker-trigger {
    @include lions-button-base;
    @include lions-button-size('base');
    @include lions-button-solid($lions-blue-500, $lions-blue-700);
    margin-left: $lions-spacing-2;
    width: auto;
    min-width: $lions-button-height-base;
  }
}

// ============================================
// 🔢 NUMBER INPUT (InputNumber)
// ============================================

.ui-inputnumber {
  .ui-inputtext {
    width: 100%;
  }

  .ui-inputnumber-button-group {
    .ui-inputnumber-button {
      @include lions-button-base;
      background: $lions-gray-100;
      border-color: $lions-gray-300;
      color: $lions-text-primary;
      width: 2rem;
      height: 50%;

      &:hover {
        background: $lions-gray-200;
        color: $lions-blue-500;
      }

      &:active {
        background: $lions-gray-300;
      }
    }
  }
}

// ============================================
// 🔍 AUTOCOMPLETE STYLES
// ============================================

.ui-autocomplete {
  width: 100%;

  .ui-inputtext {
    width: 100%;
  }

  .ui-autocomplete-dropdown {
    @include lions-button-base;
    @include lions-button-size('base');
    @include lions-button-solid($lions-blue-500, $lions-blue-700);
    margin-left: $lions-spacing-2;
    width: auto;
    min-width: $lions-button-height-base;
  }

  .ui-autocomplete-multiple-container {
    @include lions-input-base;
    @include lions-input-size('base');
    display: flex;
    flex-wrap: wrap;
    gap: $lions-spacing-2;
    min-height: $lions-input-height-base;
    padding: $lions-spacing-2;

    .ui-autocomplete-token {
      @include lions-rounded('md');
      background: $lions-blue-100;
      color: $lions-blue-700;
      padding: $lions-spacing-1 $lions-spacing-3;
      display: flex;
      align-items: center;
      gap: $lions-spacing-2;
      @include lions-font-size('sm');
      @include lions-transition();

      &:hover {
        background: $lions-blue-200;
      }

      .ui-autocomplete-token-icon {
        cursor: pointer;
        color: $lions-blue-600;

        &:hover {
          color: $lions-danger-500;
        }
      }
    }

    .ui-autocomplete-input-token {
      flex: 1;
      min-width: 120px;

      input {
        border: none;
        outline: none;
        background: transparent;
        width: 100%;
        @include lions-font-size('base');
        color: $lions-text-primary;
      }
    }
  }
}

// AutoComplete panel
.ui-autocomplete-panel {
  background: $lions-white;
  border: 1px solid $lions-gray-300;
  @include lions-rounded('md');
  @include lions-shadow('lg');
  margin-top: $lions-spacing-1;
  max-height: 300px;
  overflow-y: auto;

  .ui-autocomplete-items {
    padding: $lions-spacing-1 0;
    list-style: none;
    margin: 0;

    .ui-autocomplete-item {
      padding: $lions-spacing-3 $lions-spacing-4;
      cursor: pointer;
      @include lions-transition();
      @include lions-font-size('base');
      color: $lions-text-primary;

      &:hover,
      &.ui-state-highlight {
        background: rgba($lions-blue-50, 0.8);
        color: $lions-blue-700;
      }

      &:active {
        background: rgba($lions-blue-100, 0.8);
      }
    }

    .ui-autocomplete-group {
      padding: $lions-spacing-2 $lions-spacing-4;
      @include lions-font-size('sm');
      @include lions-font-weight('bold');
      color: $lions-text-secondary;
      background: $lions-gray-50;
      border-bottom: 1px solid $lions-gray-200;
    }
  }

  .ui-autocomplete-empty-message {
    padding: $lions-spacing-4;
    @include lions-font-size('sm');
    color: $lions-text-secondary;
    text-align: center;
  }
}

// ============================================
// 📋 MULTISELECT STYLES
// ============================================

.ui-multiselect {
  width: 100%;

  .ui-multiselect-label-container {
    .ui-multiselect-label {
      @include lions-input-base;
      @include lions-input-size('base');
      border-radius: $lions-radius-base 0 0 $lions-radius-base !important;
    }
  }

  .ui-multiselect-trigger {
    @include lions-flex-center;
    background: $lions-gray-50;
    border-left: 1px solid $lions-gray-300;
    width: $lions-button-height-base;
    color: $lions-gray-600;

    &:hover {
      background: $lions-gray-100;
      color: $lions-blue-500;
    }
  }

  &.ui-state-focus {
    .ui-multiselect-label {
      border-color: $lions-blue-500;
      box-shadow: 0 0 0 3px rgba($lions-blue-500, 0.15);
    }
  }
}

.ui-multiselect-panel {
  border: 1px solid $lions-gray-300;
  @include lions-rounded('md');
  @include lions-shadow('lg');

  .ui-multiselect-header {
    background: $lions-gray-50;
    padding: $lions-spacing-3 $lions-spacing-4;
    border-bottom: 1px solid $lions-gray-200;

    .ui-chkbox {
      margin-right: $lions-spacing-2;
    }
  }

  .ui-multiselect-items {
    padding: $lions-spacing-1 0;

    .ui-multiselect-item {
      padding: $lions-spacing-3 $lions-spacing-4;
      @include lions-transition();

      &:hover {
        background: rgba($lions-blue-50, 0.8);
      }

      .ui-chkbox {
        margin-right: $lions-spacing-2;
      }
    }
  }
}

// ============================================
// ☑️ CHECKBOX & RADIO STYLES
// ============================================

.ui-chkbox,
.ui-radiobutton {
  .ui-chkbox-box,
  .ui-radiobutton-box {
    width: 20px;
    height: 20px;
    border: 2px solid $lions-gray-400;
    background: $lions-white;
    @include lions-transition();
    @include lions-flex-center;

    .ui-chkbox-icon,
    .ui-radiobutton-icon {
      color: $lions-white;
      font-size: 12px;
    }

    &:hover {
      border-color: $lions-blue-500;
      background: rgba($lions-blue-50, 0.5);
    }

    &.ui-state-active {
      @include lions-gradient-blue;
      border-color: $lions-blue-700;

      .ui-chkbox-icon,
      .ui-radiobutton-icon {
        color: $lions-white;
      }
    }

    &.ui-state-focus {
      @include lions-focus-ring($lions-blue-500);
    }
  }

  // Checkbox specific
  .ui-chkbox-box {
    @include lions-rounded('sm');
  }

  // Radio specific
  .ui-radiobutton-box {
    border-radius: $lions-radius-full;

    &.ui-state-active {
      .ui-radiobutton-icon {
        width: 8px;
        height: 8px;
        background: $lions-white;
        border-radius: $lions-radius-full;
      }
    }
  }
}

// ============================================
// 🔘 SWITCH / TOGGLE STYLES
// ============================================

.ui-inputswitch {
  width: 48px;
  height: 24px;
  background: $lions-gray-300;
  @include lions-rounded('full');
  @include lions-transition();
  cursor: pointer;

  .ui-inputswitch-slider {
    width: 20px;
    height: 20px;
    background: $lions-white;
    @include lions-rounded('full');
    @include lions-shadow('sm');
    @include lions-transition();
    position: absolute;
    top: 2px;
    left: 2px;
  }

  &.ui-inputswitch-checked {
    @include lions-gradient-blue;

    .ui-inputswitch-slider {
      left: 26px;
    }
  }

  &:hover {
    background: $lions-gray-400;
  }

  &.ui-inputswitch-checked:hover {
    background: linear-gradient(135deg, $lions-blue-600 0%, $lions-blue-800 100%);
  }

  &.ui-inputswitch-focus {
    @include lions-focus-ring($lions-blue-500);
  }
}

// ============================================
// 📄 FILE UPLOAD STYLES
// ============================================

.ui-fileupload {
  border: 2px dashed $lions-gray-300;
  @include lions-rounded('md');
  background: $lions-gray-50;
  padding: $lions-spacing-6;
  @include lions-transition();

  &:hover {
    border-color: $lions-blue-500;
    background: rgba($lions-blue-50, 0.3);
  }

  .ui-fileupload-buttonbar {
    background: transparent;
    border: none;
    padding: $lions-spacing-4;

    .ui-button {
      @include lions-button-solid($lions-blue-500, $lions-blue-700);
    }
  }

  .ui-fileupload-content {
    background: $lions-white;
    border: 1px solid $lions-gray-200;
    @include lions-rounded('md');
    padding: $lions-spacing-4;
  }
}

// ============================================
// 💬 VALIDATION MESSAGES
// ============================================

.ui-message,
.ui-messages {
  @include lions-rounded('md');
  padding: $lions-spacing-3 $lions-spacing-4;
  @include lions-font-size('sm');
  margin-top: $lions-spacing-2;
  display: flex;
  align-items: center;
  gap: $lions-spacing-2;

  &.ui-message-error,
  &.ui-messages-error {
    background: rgba($lions-danger-50, 0.8);
    border-left: 4px solid $lions-danger-500;
    color: $lions-danger-700;

    .ui-message-icon,
    .ui-messages-icon {
      color: $lions-danger-500;
    }
  }

  &.ui-message-warn,
  &.ui-messages-warn {
    background: rgba($lions-warning-50, 0.8);
    border-left: 4px solid $lions-warning-500;
    color: $lions-warning-700;

    .ui-message-icon,
    .ui-messages-icon {
      color: $lions-warning-500;
    }
  }

  &.ui-message-info,
  &.ui-messages-info {
    background: rgba($lions-info-50, 0.8);
    border-left: 4px solid $lions-info-500;
    color: $lions-info-700;

    .ui-message-icon,
    .ui-messages-icon {
      color: $lions-info-500;
    }
  }

  &.ui-message-success,
  &.ui-messages-success {
    background: rgba($lions-success-50, 0.8);
    border-left: 4px solid $lions-success-500;
    color: $lions-success-700;

    .ui-message-icon,
    .ui-messages-icon {
      color: $lions-success-500;
    }
  }
}

// ============================================
// ♿ ACCESSIBILITY ENHANCEMENTS
// ============================================

// Focus visible for all inputs
.ui-inputtext,
.ui-inputfield,
.ui-inputtextarea,
.ui-selectonemenu,
.ui-multiselect,
.ui-chkbox-box,
.ui-radiobutton-box {
  &:focus-visible {
    @include lions-focus-ring();
  }
}

// High contrast mode
@media (prefers-contrast: high) {
  .ui-inputtext,
  .ui-inputfield,
  .ui-inputtextarea {
    border-width: 2px !important;
  }
}

// Reduced motion
@media (prefers-reduced-motion: reduce) {
  .ui-inputtext,
  .ui-inputfield,
  .ui-inputtextarea,
  .ui-selectonemenu,
  .ui-multiselect {
    transition: none !important;
  }
}

// ============================================
// 📱 RESPONSIVE ADJUSTMENTS
// ============================================

// Touch-friendly on mobile
@media (hover: none) and (pointer: coarse) {
  .ui-inputtext,
  .ui-inputfield {
    min-height: 44px; // iOS touch target minimum
  }
}
