/*
 * forms.css
 * SEO Engine Design System — Form Components
 * Tickets: UI-0043 through UI-0055
 *
 * Depends on tokens.css for CSS custom properties:
 *   --color-electric, --color-error, --border-default, --border-focus,
 *   --border-error, --shadow-md, --space-* tokens
 */

/* ==========================================================================
   SPINNER KEYFRAMES (reused for any loading form states)
   ========================================================================== */

@keyframes form-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ==========================================================================
   FORM FIELD SHARED STRUCTURE
   .form-field wraps label + input + helper/error text
   ========================================================================== */

.form-field {
  display:        flex;
  flex-direction: column;
  gap:            6px; /* label 6px above input */
}

/* Label */
.form-label {
  font-family:  var(--font-body, 'Inter', sans-serif);
  font-size:    14px;
  font-weight:  500;
  color:        var(--text-primary, #0A2540);
  line-height:  1.4;
}

/* Required asterisk */
.form-label .required {
  color:       var(--color-error, #EF4444);
  margin-left: 2px;
}

/* Helper text below the field */
.form-helper {
  font-size:   13px;
  color:       var(--text-secondary, #64748B);
  line-height: 1.4;
  margin-top:  2px;
}

/* ==========================================================================
   TEXT INPUT (UI-0043)
   md: 44px height, #F7F8FA bg, 1px #E2E8F0 border, 8px radius,
       16px padding, Inter 16px
   ========================================================================== */

.form-input {
  display:          block;
  width:            100%;
  box-sizing:       border-box;
  height:           44px;
  padding:          0 16px;
  background-color: var(--bg-surface, #F7F8FA);
  border:           1px solid var(--border-default, #E2E8F0);
  border-radius:    8px;
  font-family:      var(--font-body, 'Inter', sans-serif);
  font-size:        16px;
  font-weight:      400;
  color:            var(--text-primary, #0A2540);
  line-height:      1.5;
  outline:          none;
  transition:
    border-color 150ms ease,
    box-shadow   150ms ease,
    background-color 150ms ease;
  /* Prevent iOS zoom on focus (font < 16px would trigger it) */
  -webkit-appearance: none;
  appearance:       none;
}

/* Placeholder */
.form-input::placeholder {
  color: var(--color-gray, #B0BAC5);
}

/* Size: sm */
.form-input.input-sm {
  height:    36px;
  padding:   0 12px;
  font-size: 14px;
}

/* Size: lg */
.form-input.input-lg {
  height:    52px;
  padding:   0 20px;
  font-size: 18px;
}

/* --- Hover (UI-0044) --- */
.form-input:hover:not(:focus):not(:disabled):not(.is-error) {
  border-color: var(--border-strong, #B0BAC5);
}

/* --- Focus (UI-0045) --- */
.form-input:focus {
  border-color:     var(--border-focus, #2F80ED);
  background-color: #ffffff;
  box-shadow:       0 0 0 3px rgba(47, 128, 237, 0.15);
}

/* --- Error state (UI-0046) --- */
.form-input.is-error,
.form-input[aria-invalid="true"] {
  border-color: var(--border-error, #EF4444);
  background-color: rgba(239, 68, 68, 0.02);
}

.form-input.is-error:focus,
.form-input[aria-invalid="true"]:focus {
  border-color: var(--border-error, #EF4444);
  box-shadow:   0 0 0 3px rgba(239, 68, 68, 0.15);
  background-color: #ffffff;
}

/* Error message below field — 4px gap, 13px, alert icon */
.form-error {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   13px;
  font-weight: 500;
  color:       var(--color-error, #EF4444);
  line-height: 1.4;
  margin-top:  4px;
}

.form-error::before {
  content:         '';
  display:         inline-block;
  width:           14px;
  height:          14px;
  flex-shrink:     0;
  background-color: currentColor;
  /* Alert circle icon via mask */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Disabled (UI-0047) --- */
.form-input:disabled {
  background-color: var(--bg-muted, #EEF1F5);
  border-color:     var(--border-default, #E2E8F0);
  color:            var(--color-gray, #B0BAC5);
  cursor:           not-allowed;
  -webkit-text-fill-color: var(--color-gray, #B0BAC5); /* Safari fix */
}

.form-input:disabled::placeholder {
  color: var(--color-gray, #B0BAC5);
}

/* ==========================================================================
   TEXTAREA (UI-0048)
   Inherits all input states; min-height 120px, resize vertical only
   ========================================================================== */

.form-textarea {
  display:          block;
  width:            100%;
  min-height:       120px;
  padding:          12px 16px;
  background-color: var(--bg-surface, #F7F8FA);
  border:           1px solid var(--border-default, #E2E8F0);
  border-radius:    8px;
  font-family:      var(--font-body, 'Inter', sans-serif);
  font-size:        16px;
  font-weight:      400;
  color:            var(--text-primary, #0A2540);
  line-height:      1.6;
  resize:           vertical;
  outline:          none;
  transition:
    border-color     150ms ease,
    box-shadow       150ms ease,
    background-color 150ms ease;
  -webkit-appearance: none;
  appearance:       none;
}

.form-textarea::placeholder {
  color: var(--color-gray, #B0BAC5);
}

.form-textarea:hover:not(:focus):not(:disabled):not(.is-error) {
  border-color: var(--border-strong, #B0BAC5);
}

.form-textarea:focus {
  border-color:     var(--border-focus, #2F80ED);
  background-color: #ffffff;
  box-shadow:       0 0 0 3px rgba(47, 128, 237, 0.15);
}

.form-textarea.is-error,
.form-textarea[aria-invalid="true"] {
  border-color: var(--border-error, #EF4444);
}

.form-textarea.is-error:focus,
.form-textarea[aria-invalid="true"]:focus {
  border-color: var(--border-error, #EF4444);
  box-shadow:   0 0 0 3px rgba(239, 68, 68, 0.15);
  background-color: #ffffff;
}

.form-textarea:disabled {
  background-color: var(--bg-muted, #EEF1F5);
  color:            var(--color-gray, #B0BAC5);
  cursor:           not-allowed;
  resize:           none;
}

/* ==========================================================================
   SELECT / DROPDOWN (UI-0049)
   Custom chevron, appearance:none, full state parity with input
   ========================================================================== */

.form-select {
  display:          block;
  width:            100%;
  height:           44px;
  padding:          0 40px 0 16px; /* right padding for chevron */
  background-color: var(--bg-surface, #F7F8FA);
  /* Inline SVG chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23B0BAC5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 12px center;
  background-size:     20px 20px;
  border:           1px solid var(--border-default, #E2E8F0);
  border-radius:    8px;
  font-family:      var(--font-body, 'Inter', sans-serif);
  font-size:        16px;
  font-weight:      400;
  color:            var(--text-primary, #0A2540);
  line-height:      1.5;
  outline:          none;
  cursor:           pointer;
  -webkit-appearance: none;
  appearance:       none;
  transition:
    border-color     150ms ease,
    box-shadow       150ms ease,
    background-color 150ms ease;
}

.form-select:hover:not(:focus):not(:disabled):not(.is-error) {
  border-color: var(--border-strong, #B0BAC5);
}

.form-select:focus {
  border-color:     var(--border-focus, #2F80ED);
  background-color: #ffffff;
  box-shadow:       0 0 0 3px rgba(47, 128, 237, 0.15);
}

.form-select.is-error,
.form-select[aria-invalid="true"] {
  border-color: var(--border-error, #EF4444);
}

.form-select.is-error:focus,
.form-select[aria-invalid="true"]:focus {
  border-color: var(--border-error, #EF4444);
  box-shadow:   0 0 0 3px rgba(239, 68, 68, 0.15);
  background-color: #ffffff;
}

.form-select:disabled {
  background-color: var(--bg-muted, #EEF1F5);
  color:            var(--color-gray, #B0BAC5);
  cursor:           not-allowed;
}

/* Dropdown option items — hover and selected state */
.form-select option {
  padding:    8px 16px;
  font-size:  16px;
  background: #ffffff;
  color:      var(--text-primary, #0A2540);
}

/* ==========================================================================
   CHECKBOX (UI-0050)
   20px square, 2px border, 4px radius
   Checked: #2F80ED bg with white checkmark
   ========================================================================== */

.form-checkbox-wrapper {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  cursor:      pointer;
  user-select: none;
}

.form-checkbox-wrapper input[type="checkbox"] {
  /* Hide native checkbox */
  position:   absolute;
  opacity:    0;
  width:      0;
  height:     0;
}

.form-checkbox {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            20px;
  height:           20px;
  min-width:        20px;
  border:           2px solid var(--border-strong, #B0BAC5);
  border-radius:    4px;
  background-color: #ffffff;
  transition:
    border-color     150ms ease,
    background-color 150ms ease,
    box-shadow       150ms ease;
  flex-shrink:      0;
  margin-top:       1px; /* optical alignment with label */
}

/* Checkmark (hidden until checked) */
.form-checkbox::after {
  content:      '';
  display:      block;
  width:        10px;
  height:       7px;
  border-left:  2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform:    rotate(-45deg) translateY(-1px);
  opacity:      0;
  transition:   opacity 100ms ease;
}

/* Hover: border to blue */
.form-checkbox-wrapper:hover .form-checkbox {
  border-color: var(--color-electric, #2F80ED);
}

/* Focus via keyboard on the hidden input */
.form-checkbox-wrapper input[type="checkbox"]:focus-visible ~ .form-checkbox,
.form-checkbox-wrapper input[type="checkbox"]:focus ~ .form-checkbox {
  border-color: var(--color-electric, #2F80ED);
  box-shadow:   0 0 0 3px rgba(47, 128, 237, 0.20);
}

/* Checked state */
.form-checkbox-wrapper input[type="checkbox"]:checked ~ .form-checkbox {
  background-color: var(--color-electric, #2F80ED);
  border-color:     var(--color-electric, #2F80ED);
}

.form-checkbox-wrapper input[type="checkbox"]:checked ~ .form-checkbox::after {
  opacity: 1;
}

/* Disabled */
.form-checkbox-wrapper input[type="checkbox"]:disabled ~ .form-checkbox {
  background-color: var(--bg-muted, #EEF1F5);
  border-color:     var(--border-default, #E2E8F0);
  cursor:           not-allowed;
}

/* Checkbox label text */
.form-checkbox-label {
  font-size:   15px;
  color:       var(--text-primary, #0A2540);
  line-height: 1.5;
}

/* ==========================================================================
   RADIO BUTTON (UI-0051)
   20px circle, 2px border
   Selected: #2F80ED border with 6px inner filled circle
   ========================================================================== */

.form-radio-wrapper {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  cursor:      pointer;
  user-select: none;
}

.form-radio-wrapper input[type="radio"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.form-radio {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            20px;
  height:           20px;
  min-width:        20px;
  border:           2px solid var(--border-strong, #B0BAC5);
  border-radius:    50%;
  background-color: #ffffff;
  transition:
    border-color     150ms ease,
    box-shadow       150ms ease;
  flex-shrink:      0;
  margin-top:       2px;
}

/* Inner circle (hidden until selected) */
.form-radio::after {
  content:          '';
  display:          block;
  width:            6px;
  height:           6px;
  border-radius:    50%;
  background-color: var(--color-electric, #2F80ED);
  opacity:          0;
  transform:        scale(0);
  transition:
    opacity   150ms ease,
    transform 150ms ease;
}

/* Hover */
.form-radio-wrapper:hover .form-radio {
  border-color: var(--color-electric, #2F80ED);
}

/* Focus */
.form-radio-wrapper input[type="radio"]:focus-visible ~ .form-radio,
.form-radio-wrapper input[type="radio"]:focus ~ .form-radio {
  border-color: var(--color-electric, #2F80ED);
  box-shadow:   0 0 0 3px rgba(47, 128, 237, 0.20);
}

/* Selected */
.form-radio-wrapper input[type="radio"]:checked ~ .form-radio {
  border-color: var(--color-electric, #2F80ED);
}

.form-radio-wrapper input[type="radio"]:checked ~ .form-radio::after {
  opacity:   1;
  transform: scale(1);
}

/* Disabled */
.form-radio-wrapper input[type="radio"]:disabled ~ .form-radio {
  background-color: var(--bg-muted, #EEF1F5);
  border-color:     var(--border-default, #E2E8F0);
  cursor:           not-allowed;
}

/* Radio label text */
.form-radio-label {
  font-size:   15px;
  color:       var(--text-primary, #0A2540);
  line-height: 1.5;
}

/* ==========================================================================
   SEARCH INPUT — STANDARD (UI-0052)
   Text input + search icon left (padding-left 40px) + X clear button
   ========================================================================== */

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

/* Search icon (positioned left) */
.form-search-wrapper .search-icon {
  position:   absolute;
  left:       12px;
  top:        50%;
  transform:  translateY(-50%);
  width:      18px;
  height:     18px;
  color:      var(--color-gray, #B0BAC5);
  pointer-events: none;
  flex-shrink: 0;
  transition: color 150ms ease;
}

/* Input with left icon padding */
.form-search {
  display:          block;
  width:            100%;
  height:           44px;
  padding:          0 40px 0 40px; /* left: icon; right: clear button */
  background-color: var(--bg-surface, #F7F8FA);
  border:           1px solid var(--border-default, #E2E8F0);
  border-radius:    8px;
  font-family:      var(--font-body, 'Inter', sans-serif);
  font-size:        16px;
  font-weight:      400;
  color:            var(--text-primary, #0A2540);
  line-height:      1.5;
  outline:          none;
  -webkit-appearance: none;
  appearance:       none;
  transition:
    border-color     150ms ease,
    box-shadow       150ms ease,
    background-color 150ms ease;
}

.form-search::placeholder {
  color: var(--color-gray, #B0BAC5);
}

.form-search:hover:not(:focus):not(:disabled) {
  border-color: var(--border-strong, #B0BAC5);
}

.form-search:focus {
  border-color:     var(--border-focus, #2F80ED);
  background-color: #ffffff;
  box-shadow:       0 0 0 3px rgba(47, 128, 237, 0.15);
}

/* Focus: change search icon color to blue */
.form-search:focus ~ .search-icon,
.form-search-wrapper:focus-within .search-icon {
  color: var(--color-electric, #2F80ED);
}

/* Clear (X) button — appears when input has value via JS toggling .has-value */
.form-search-clear {
  position:         absolute;
  right:            10px;
  top:              50%;
  transform:        translateY(-50%);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            24px;
  height:           24px;
  border:           none;
  background:       transparent;
  color:            var(--color-gray, #B0BAC5);
  cursor:           pointer;
  border-radius:    50%;
  padding:          0;
  transition:
    color            150ms ease,
    background-color 150ms ease;
  /* Hidden by default */
  opacity:          0;
  pointer-events:   none;
}

.form-search-clear svg { width: 14px; height: 14px; }

/* Show clear button when wrapper has .has-value */
.form-search-wrapper.has-value .form-search-clear {
  opacity:        1;
  pointer-events: auto;
}

.form-search-clear:hover {
  background-color: rgba(100, 116, 139, 0.10);
  color:            var(--text-primary, #0A2540);
}

/* ==========================================================================
   SEARCH INPUT — COMPACT (UI-0053)
   36px height, 14px font, 36px left icon padding
   ========================================================================== */

.form-search-wrapper.search-compact .form-search,
.form-search.search-compact {
  height:    36px;
  font-size: 14px;
  padding:   0 36px 0 36px;
}

.form-search-wrapper.search-compact .search-icon {
  left:   10px;
  width:  16px;
  height: 16px;
}

.form-search-wrapper.search-compact .form-search-clear {
  right:  8px;
  width:  20px;
  height: 20px;
}

.form-search-wrapper.search-compact .form-search-clear svg {
  width:  12px;
  height: 12px;
}

/* ==========================================================================
   SEARCH INPUT — EXPANDABLE (UI-0054)
   200px default, expands to 320px on focus, 200ms width transition
   ========================================================================== */

.form-search-wrapper.search-expandable {
  width: 200px;
  transition: width 200ms ease;
}

.form-search-wrapper.search-expandable:focus-within {
  width: 320px;
}

/* The input inside expandable wrapper fills 100% of wrapper width */
.form-search-wrapper.search-expandable .form-search {
  width: 100%;
}

/* ==========================================================================
   FILE UPLOAD DROP ZONE (UI-0055)
   Dashed 2px #E2E8F0 border, 12px radius, 32px padding
   Hover/dragging: #2F80ED border + #E8F1FD background
   ========================================================================== */

.form-upload {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              12px;
  padding:          32px;
  border:           2px dashed var(--border-default, #E2E8F0);
  border-radius:    12px;
  background-color: var(--bg-surface, #F7F8FA);
  cursor:           pointer;
  text-align:       center;
  transition:
    border-color     200ms ease,
    background-color 200ms ease;
  outline:          none;
}

/* Hover state */
.form-upload:hover {
  border-color:     var(--color-electric, #2F80ED);
  background-color: var(--color-electric-light, #E8F1FD);
}

/* Dragging state (applied via JS adding .is-dragging class) */
.form-upload.is-dragging {
  border-color:     var(--color-electric, #2F80ED);
  background-color: var(--color-electric-light, #E8F1FD);
  box-shadow:       0 0 0 4px rgba(47, 128, 237, 0.15);
}

/* Focus ring for accessibility */
.form-upload:focus-visible {
  border-color:     var(--color-electric, #2F80ED);
  box-shadow:       0 0 0 3px rgba(47, 128, 237, 0.25);
}

/* Upload icon area */
.form-upload__icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            48px;
  height:           48px;
  border-radius:    50%;
  background-color: var(--color-electric-10, rgba(47, 128, 237, 0.10));
  color:            var(--color-electric, #2F80ED);
  transition:       background-color 200ms ease;
}

.form-upload:hover .form-upload__icon,
.form-upload.is-dragging .form-upload__icon {
  background-color: rgba(47, 128, 237, 0.20);
}

.form-upload__icon svg { width: 24px; height: 24px; }

/* Primary instruction text */
.form-upload__title {
  font-family:  var(--font-body, 'Inter', sans-serif);
  font-size:    15px;
  font-weight:  600;
  color:        var(--text-primary, #0A2540);
  line-height:  1.4;
}

/* "click to browse" link-style span */
.form-upload__browse {
  color: var(--color-electric, #2F80ED);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 150ms ease;
}

.form-upload__browse:hover {
  text-decoration-color: var(--color-electric, #2F80ED);
}

/* Subtitle / file type hint */
.form-upload__hint {
  font-size:   13px;
  color:       var(--text-secondary, #64748B);
  line-height: 1.4;
}

/* File list — shown after files are selected */
.form-upload__file-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  width:          100%;
  margin-top:     8px;
}

.form-upload__file-item {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              10px;
  padding:          8px 12px;
  background-color: #ffffff;
  border:           1px solid var(--border-default, #E2E8F0);
  border-radius:    6px;
  font-size:        13px;
  color:            var(--text-primary, #0A2540);
}

.form-upload__file-name {
  flex:           1;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
  font-weight:    500;
}

.form-upload__file-size {
  font-size: 12px;
  color:     var(--text-secondary, #64748B);
  flex-shrink: 0;
}

.form-upload__file-remove {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            20px;
  height:           20px;
  border:           none;
  background:       transparent;
  color:            var(--color-gray, #B0BAC5);
  cursor:           pointer;
  border-radius:    50%;
  padding:          0;
  flex-shrink:      0;
  transition:       color 150ms ease, background-color 150ms ease;
}

.form-upload__file-remove:hover {
  background-color: rgba(239, 68, 68, 0.10);
  color:            var(--color-error, #EF4444);
}

.form-upload__file-remove svg { width: 12px; height: 12px; }

/* Error state on upload zone */
.form-upload.is-error {
  border-color: var(--border-error, #EF4444);
}

/* Disabled state */
.form-upload.is-disabled {
  background-color: var(--bg-muted, #EEF1F5);
  border-color:     var(--border-default, #E2E8F0);
  cursor:           not-allowed;
  pointer-events:   none;
  opacity:          0.60;
}

/* ==========================================================================
   Forms — Mobile Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .form-input,
  .form-textarea,
  .form-select,
  .form-search {
    font-size: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .form-field {
    width: 100%;
  }

  .form-search-wrapper.search-expandable {
    width: 100%;
  }

  .form-search-wrapper.search-expandable:focus-within {
    width: 100%;
  }
}

@media (max-width: 639px) {
  /* Prevent iOS zoom: ensure 16px minimum font on all inputs */
  .form-input,
  .form-textarea,
  .form-select,
  .form-search {
    font-size: 16px;
    width: 100%;
    max-width: 100%;
  }

  .form-input.input-sm,
  .form-search.search-compact,
  .form-search-wrapper.search-compact .form-search {
    font-size: 16px;
  }

  /* Full-width form fields */
  .form-field {
    width: 100%;
  }

  /* Upload zone: reduced padding on mobile */
  .form-upload {
    padding: var(--space-5);
  }

  .form-upload__icon {
    width: 40px;
    height: 40px;
  }

  /* Expandable search: full width on mobile */
  .form-search-wrapper.search-expandable {
    width: 100%;
  }

  .form-search-wrapper.search-expandable:focus-within {
    width: 100%;
  }

  /* Checkbox/radio touch targets */
  .form-checkbox-wrapper,
  .form-radio-wrapper {
    min-height: 44px;
    padding: 8px 0;
  }

  .form-checkbox,
  .form-radio {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .form-checkbox::after {
    width: 12px;
    height: 9px;
  }

  .form-radio::after {
    width: 8px;
    height: 8px;
  }
}

@media (max-width: 480px) {
  .form-input,
  .form-textarea,
  .form-select,
  .form-search {
    font-size: 16px;
    height: 48px;
  }

  .form-textarea {
    height: auto;
    min-height: 100px;
  }

  .form-select {
    height: 48px;
  }

  .form-upload {
    padding: var(--space-4);
  }

  .form-label {
    font-size: 13px;
  }
}