/* =============================================================================
   Osmanthus Platform - Unified Form Component System
   
   This file contains all form-related styles for the platform including
   inputs, selects, textareas, checkboxes, radios, and form layouts.
   ============================================================================= */

/* =============================================================================
   Form-Specific CSS Variables
   ============================================================================= */
   :root {
    /* Form Sizing */
    --input-height: 44px;
    --input-height-sm: 36px;
    --input-height-lg: 52px;
    --input-padding-x: var(--spacing-md);
    --input-padding-y: var(--spacing-sm);
    --input-radius: 0; /* Mindstate: Sharp corners */
    
    /* Form Colors */
    --input-bg: var(--color-white); /* Mindstate: White background */
    --input-bg-focus: var(--color-white);
    --input-border: var(--ms-dark-gray); /* Mindstate: Dark gray border */
    --input-border-focus: var(--color-black); /* Mindstate: Black border on focus */
    --input-text: var(--color-text);
    --input-placeholder: var(--ms-light-gray-subtext); /* Mindstate: Light gray subtext */
    
    /* Form Shadows */
    /* Mindstate: Minimal shadows instead of neuomorphic */
    --input-shadow: none; /* Mindstate: No shadow by default */
    --input-shadow-focus: none; /* Mindstate: No shadow on focus */
      
    /* Form Transitions */
    --input-transition: all 0.15s ease; /* Mindstate: Faster transitions */
  }
  
  /* =============================================================================
     Base Form Group Container
     ============================================================================= */
  .os-form-group {
    margin-bottom: var(--spacing-lg);
  }
  
  .os-form-group--inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
  }
  
  /* =============================================================================
     Form Labels
     ============================================================================= */
  .os-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-dark);
    /* Mindstate: Add uppercase styling for labels */
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .os-label--required::after {
    content: ' *';
    color: var(--ms-data-orange); /* Mindstate: Data orange for required */
  }
  
  .os-label--optional::after {
    content: ' (optional)';
    font-size: 0.85em;
    color: var(--ms-light-gray-subtext); /* Mindstate: Light gray subtext */
    font-weight: 400;
    text-transform: none; /* Mindstate: Keep lowercase for optional */
  }
  
  /* =============================================================================
     Base Input Component
     ============================================================================= */
  .os-input {
    /* Layout */
    display: block;
    width: 100%;
    height: var(--input-height);
    padding: var(--input-padding-y) var(--input-padding-x);
    
    /* Typography */
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--input-text);
    
    /* Styling */
    /* Mindstate: Solid background instead of gradient */
    background: var(--input-bg);
    border: 1px solid var(--input-border); /* Mindstate: 1px border instead of 2px */
    border-radius: var(--input-radius); /* Mindstate: Sharp corners */
    
    /* Mindstate: Remove neuomorphic shadow */
    box-shadow: var(--input-shadow);
    
    /* Transitions */
    transition: var(--input-transition);
    
    /* Browser defaults */
    appearance: none;
    -webkit-appearance: none;
  }
  
  /* Input placeholder */
  .os-input::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
  }
  
  /* Input hover state */
  /* Mindstate: Simplified hover */
  .os-input:hover:not(:disabled):not(:focus) {
    background: var(--color-bg-light); /* Mindstate: Light gray on hover */
    border-color: var(--ms-dark-gray);
  }
  
  /* Input focus state */
  /* Mindstate: Simplified focus with black border */
  .os-input:focus {
    outline: none;
    background: var(--input-bg-focus);
    border-color: var(--input-border-focus);
    box-shadow: var(--input-shadow-focus);
    transform: translateY(-1px);
  }
  
  /* Input disabled state */
  .os-input:disabled,
  .os-input--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--color-bg-dark); /* Mindstate: Light gray for disabled */
  }
  
  /* =============================================================================
     Input Variants
     ============================================================================= */
  
  /* Small input */
  .os-input--sm {
    height: var(--input-height-sm);
    padding: calc(var(--input-padding-y) * 0.75) var(--input-padding-x);
    font-size: 0.875rem;
  }
  
  /* Large input */
  .os-input--lg {
    height: var(--input-height-lg);
    padding: calc(var(--input-padding-y) * 1.25) var(--input-padding-x);
    font-size: 1.125rem;
  }
  
  /* Input with icon */
  .os-input-wrapper {
    position: relative;
  }
  
  .os-input-wrapper .os-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ms-medium-grey); /* Mindstate: Medium gray for icons */
    pointer-events: none;
    font-size: 1.2rem;
  }
  
  .os-input-wrapper .os-input-icon--left {
    left: var(--input-padding-x);
  }
  
  .os-input-wrapper .os-input-icon--right {
    right: var(--input-padding-x);
  }
  
  .os-input-wrapper .os-input--icon-left {
    padding-left: calc(var(--input-padding-x) * 2.5);
  }
  
  .os-input-wrapper .os-input--icon-right {
    padding-right: calc(var(--input-padding-x) * 2.5);
  }
  
  /* =============================================================================
     Textarea Component
     ============================================================================= */
  .os-textarea {
    /* Extend input styles */
    @extend .os-input;
    
    /* Textarea specific */
    min-height: 120px;
    height: auto;
    resize: vertical;
    padding: var(--input-padding-x);
  }
  
  .os-textarea--sm {
    min-height: 80px;
    font-size: 0.875rem;
  }
  
  .os-textarea--lg {
    min-height: 160px;
    font-size: 1.125rem;
  }
  
  /* =============================================================================
     Select Component
     ============================================================================= */
  .os-select-wrapper {
    position: relative;
  }
  
  .os-select {
    /* Extend input styles */
    @extend .os-input;
    
    /* Select specific */
    padding-right: calc(var(--input-padding-x) * 2.5);
    cursor: pointer;
  }
  
  /* Custom select arrow */
  /* Mindstate: Updated arrow color and removed rotation animation */
  .os-select-wrapper::after {
    content: '▼';
    position: absolute;
    right: var(--input-padding-x);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ms-dark-gray); /* Mindstate: Dark gray arrow */
    font-size: 0.8rem;
    transition: transform var(--input-transition);
  }
  
  .os-select:focus + .os-select-wrapper::after {
    transform: translateY(-50%); /* Mindstate: Remove rotation on focus */
    color: var(--color-black); /* Mindstate: Black when focused */
  }
  
  /* =============================================================================
     Checkbox and Radio Components
     ============================================================================= */
  .os-checkbox,
  .os-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
  
  .os-checkbox input[type="checkbox"],
  .os-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  /* Custom checkbox/radio */
  /* Mindstate: Simplified with solid colors and borders */
  .os-checkbox__box,
  .os-radio__circle {
    width: 24px;
    height: 24px;
    background: var(--color-white); /* Mindstate: White background */
    border: 1px solid var(--ms-dark-gray); /* Mindstate: Dark border */
    box-shadow: none; /* Mindstate: Remove shadow */
    transition: var(--input-transition);
    position: relative;
    flex-shrink: 0;
  }
  
  .os-checkbox__box {
    border-radius: 0; /* Mindstate: Sharp corners */
  }
  
  .os-radio__circle {
    border-radius: 50%; /* Keep circular for radio */
  }
  
  /* Hover state */
  /* Mindstate: Simplified hover */
  .os-checkbox:hover .os-checkbox__box,
  .os-radio:hover .os-radio__circle {
    background: var(--color-bg-light); /* Mindstate: Light gray on hover */
    border-color: var(--color-black); /* Mindstate: Black border on hover */
  }
  
  /* Checked state */
  /* Mindstate: Solid color when checked */
  .os-checkbox input:checked ~ .os-checkbox__box,
  .os-radio input:checked ~ .os-radio__circle {
    background: var(--ms-data-green); /* Mindstate: Data green */
    border-color: var(--ms-data-green);
    box-shadow: none; /* Mindstate: Remove shadow */
  }
  
  /* Checkbox checkmark */
  .os-checkbox input:checked ~ .os-checkbox__box::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
  }
  
  /* Radio dot */
  .os-radio input:checked ~ .os-radio__circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
  }
  
  /* Label text */
  .os-checkbox__label,
  .os-radio__label {
    margin-left: var(--spacing-sm);
    color: var(--color-text);
  }
  
  /* =============================================================================
     Form States
     ============================================================================= */
  
  /* Error state */
  /* Mindstate: Simplified error state */
  .os-input--error,
  .os-textarea--error,
  .os-select--error {
    border-color: var(--ms-data-orange); /* Mindstate: Data orange for errors */
    background: #FFF5F0; /* Mindstate: Light orange tint */
  }
  
  .os-input--error:focus,
  .os-textarea--error:focus,
  .os-select--error:focus {
    border-color: var(--ms-data-orange);
    box-shadow: none; /* Mindstate: No shadow */
  }
  
  /* Success state */
  /* Mindstate: Simplified success state */
  .os-input--success,
  .os-textarea--success,
  .os-select--success {
    border-color: var(--ms-data-green); /* Mindstate: Data green for success */
    background: #F0F8F0; /* Mindstate: Light green tint */
  }
  
  /* Help text */
  .os-help-text {
    margin-top: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--ms-light-gray-subtext); /* Mindstate: Light gray subtext */
  }
  
  .os-help-text--error {
    color: var(--ms-data-orange); /* Mindstate: Data orange */
  }
  
  .os-help-text--success {
    color: var(--ms-data-green); /* Mindstate: Data green */
  }
  
  /* =============================================================================
     Input Groups
     ============================================================================= */
  /* Mindstate: Simplified input groups */
  .os-input-group {
    display: flex;
    align-items: stretch;
    background: var(--color-white); /* Mindstate: White background */
    border-radius: var(--input-radius); /* Mindstate: Sharp corners */
    border: 1px solid var(--ms-dark-gray); /* Mindstate: Dark border */
    box-shadow: none; /* Mindstate: Remove shadow */
    overflow: hidden;
  }
  
  .os-input-group .os-input {
    border-radius: 0;
    box-shadow: none;
    border: none;
    flex: 1;
  }
  
  .os-input-group__addon {
    padding: 0 var(--input-padding-x);
    background: var(--color-bg-light); /* Mindstate: Light gray */
    color: var(--ms-dark-gray); /* Mindstate: Dark gray text */
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    border-right: 1px solid var(--ms-light-grey); /* Mindstate: Light border */
  }
  
  .os-input-group__addon--right {
    border-right: none;
    border-left: 1px solid var(--ms-light-grey); /* Mindstate: Light border */
  }
  
  /* =============================================================================
     Search Input
     ============================================================================= */
  .os-search {
    position: relative;
  }
  
  .os-search__input {
    @extend .os-input;
    padding-left: calc(var(--input-padding-x) * 2.5);
    padding-right: calc(var(--input-padding-x) * 2.5);
  }
  
  .os-search__icon {
    position: absolute;
    left: var(--input-padding-x);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ms-medium-grey); /* Mindstate: Medium gray */
    pointer-events: none;
  }
  
  .os-search__clear {
    position: absolute;
    right: var(--input-padding-x);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--ms-medium-grey); /* Mindstate: Medium gray */
    cursor: pointer;
    padding: 4px;
    opacity: 0;
    transition: opacity var(--input-transition);
  }
  
  .os-search__input:not(:placeholder-shown) ~ .os-search__clear {
    opacity: 1;
  }
  
  /* =============================================================================
     Responsive Styles
     ============================================================================= */
  @media (max-width: 768px) {
    .os-input,
    .os-select,
    .os-textarea {
      font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .os-form-group--inline {
      flex-direction: column;
      align-items: stretch;
    }
  }
  
  /* =============================================================================
     Migration Helpers
     ============================================================================= */
  .neumorphic-input,
  .form-control,
  input[type="text"]:not(.os-input),
  input[type="email"]:not(.os-input),
  input[type="password"]:not(.os-input),
  input[type="number"]:not(.os-input),
  input[type="search"]:not(.os-input),
  textarea:not(.os-textarea),
  select:not(.os-select) {
    @extend .os-input;
  }
  
  .neumorphic-select,
  .form-select {
    @extend .os-select;
  }