/*
 * Form Component Styles - Pop Art Edition
 * Form sections, inputs, checkboxes, and form actions
 * Bold 4px borders, comic shadows, lift-up focus effects
 */

@layer components {
  /* ==========================================================================
     Form Sections - Card style with comic shadow
     ========================================================================== */

  .form-section {
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
    padding: var(--space-6);
    margin-block-end: var(--space-6);
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    &:hover {
      transform: translate(-2px, -2px);
      box-shadow: var(--comic-shadow-lg);
    }

    & h2 {
      font-size: var(--text-base);
      font-weight: var(--font-bold);
      text-transform: uppercase;
      letter-spacing: 0.025em;
      margin-block-end: var(--space-2);
    }
  }

  /* Static form section - no hover effect */
  .form-section-static {
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
    padding: var(--space-6);
    margin-block-end: var(--space-6);

    & h2 {
      font-size: var(--text-base);
      font-weight: var(--font-bold);
      text-transform: uppercase;
      letter-spacing: 0.025em;
      margin-block-end: var(--space-2);
    }
  }

  .form-section-help {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin-block-end: var(--space-4);
  }

  /* ==========================================================================
     Form Rows (multi-column)
     ========================================================================== */

  .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
  }

  .form-row-3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-4);

    @media (max-width: 640px) {
      grid-template-columns: 1fr;
    }
  }

  /* ==========================================================================
     Form Group
     ========================================================================== */

  .form-group {
    margin-block-end: var(--space-4);

    &:last-child {
      margin-block-end: 0;
    }

    & label {
      display: block;
      font-size: var(--text-sm);
      font-weight: var(--font-bold);
      text-transform: uppercase;
      letter-spacing: 0.025em;
      margin-block-end: var(--space-1_5);
    }

    & input[type="text"],
    & input[type="email"],
    & input[type="password"],
    & input[type="number"],
    & input[type="url"],
    & input[type="tel"],
    & input[type="date"],
    & textarea,
    & select {
      inline-size: 100%;
      padding: var(--space-2_5) var(--space-3);
      border: 4px solid var(--color-comic-border);
      font-size: var(--text-base);
      font-weight: var(--font-medium);
      background-color: var(--color-surface);
      color: var(--color-ink);
      box-shadow: 4px 4px 0 var(--comic-shadow-color);
      transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;

      &:focus {
        outline: none;
        border-color: #3B82F6;
        transform: translate(-1px, -1px);
        box-shadow: 5px 5px 0 var(--comic-shadow-color);
      }

      &:disabled {
        background-color: var(--color-border-muted);
        cursor: not-allowed;
        opacity: var(--opacity-70);
        box-shadow: none;
      }

      &::placeholder {
        color: var(--color-ink-faint);
        font-weight: var(--font-normal);
      }
    }

    & textarea {
      min-block-size: 100px;
      resize: vertical;
    }
  }

  /* ==========================================================================
     Checkbox Group - Pop Art style with scale hover
     ========================================================================== */

  .form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
    cursor: pointer;

    & input[type="checkbox"] {
      appearance: none;
      inline-size: var(--space-5);
      block-size: var(--space-5);
      margin-block-start: var(--space-0_5);
      background-color: var(--color-surface);
      border: 4px solid var(--color-comic-border);
      box-shadow: 2px 2px 0 var(--comic-shadow-color);
      cursor: pointer;
      flex-shrink: 0;
      transition: transform 0.15s ease, background-color 0.15s ease;
      position: relative;

      &:hover {
        transform: scale(1.1);
      }

      &:checked {
        background-color: #3B82F6;
      }

      &:checked::after {
        content: "";
        position: absolute;
        inset: 2px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }

      &:focus {
        outline: none;
        border-color: #3B82F6;
      }
    }

    & label {
      flex: 1;
      margin-block-end: 0;
      font-weight: var(--font-bold);
      cursor: pointer;
      line-height: 1.4;
      transition: color 0.15s ease;

      &:hover {
        color: var(--color-wham-blue);
      }
    }
  }

  /* Override form-group label styles when combined with form-checkbox */
  .form-group.form-checkbox label {
    display: inline;
    margin-block-end: 0;
    text-transform: none;
  }

  /* ==========================================================================
     Radio Buttons - Pop Art style
     ========================================================================== */

  .form-radio {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
    cursor: pointer;

    & input[type="radio"] {
      appearance: none;
      inline-size: var(--space-5);
      block-size: var(--space-5);
      background-color: var(--color-surface);
      border: 4px solid var(--color-comic-border);
      border-radius: 50%;
      box-shadow: 2px 2px 0 var(--comic-shadow-color);
      cursor: pointer;
      flex-shrink: 0;
      transition: transform 0.15s ease, background-color 0.15s ease;
      position: relative;

      &:hover {
        transform: scale(1.1);
      }

      &:checked {
        background-color: #EC4899;
      }

      &:checked::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6px;
        height: 6px;
        background-color: white;
        border-radius: 50%;
      }

      &:focus {
        outline: none;
        border-color: #EC4899;
      }
    }

    & label {
      font-weight: var(--font-bold);
      cursor: pointer;
      transition: color 0.15s ease;

      &:hover {
        color: var(--color-kapow-pink);
      }
    }
  }

  /* ==========================================================================
     Toggle Switch - Pop Art style
     ========================================================================== */

  .form-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;

    & input[type="checkbox"] {
      appearance: none;
      inline-size: 48px;
      block-size: 24px;
      background-color: #d1d5db;
      border: 4px solid var(--color-comic-border);
      box-shadow: 2px 2px 0 var(--comic-shadow-color);
      cursor: pointer;
      position: relative;
      transition: background-color 0.15s ease, border-color 0.15s ease;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 16px;
        height: 16px;
        background-color: var(--color-surface);
        border-right: 4px solid var(--color-comic-border);
        transition: left 0.15s ease;
      }

      &:checked {
        background-color: #22C55E;
      }

      &:checked::after {
        left: 24px;
      }

      &:hover {
        border-color: #22C55E;
      }

      &:focus {
        outline: none;
        border-color: #22C55E;
      }
    }

    & .toggle-label {
      font-weight: var(--font-bold);
      font-size: var(--text-sm);
    }
  }

  /* ==========================================================================
     Form Help Text
     ========================================================================== */

  .form-help {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin-block-start: var(--space-1_5);

    & code {
      background: var(--color-border-muted);
      padding: var(--space-0_5) var(--space-1_5);
      border: 1px solid var(--color-border);
      font-size: var(--text-xs);
      font-weight: var(--font-bold);
    }
  }

  /* ==========================================================================
     Form Error - Bold red styling
     ========================================================================== */

  .form-error {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--color-pow-red);
    margin-block-start: var(--space-1_5);
  }

  .form-group.has-error {
    & input,
    & textarea,
    & select {
      border-color: var(--color-pow-red);

      &:focus {
        border-color: var(--color-pow-red);
        box-shadow: 5px 5px 0 var(--color-pow-red);
      }
    }
  }

  /* ==========================================================================
     Form Actions
     ========================================================================== */

  .form-actions {
    display: flex;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-medium) solid var(--color-comic-border);
  }

  /* ==========================================================================
     Form Hint
     ========================================================================== */

  .form-hint {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin-block-start: var(--space-1);
  }

  /* ==========================================================================
     Form Errors Container - Alert style
     ========================================================================== */

  .form-errors {
    --alert-bg: light-dark(oklch(0.95 0.06 25), oklch(0.25 0.06 25));
    background-color: var(--alert-bg);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-sm);
    padding: var(--space-4);
    margin-block-end: var(--space-4);

    & h4 {
      color: var(--color-pow-red);
      font-size: var(--text-sm);
      font-weight: var(--font-bold);
      text-transform: uppercase;
      margin-block-end: var(--space-2);
    }

    & ul {
      list-style: none;
      padding-inline-start: 0;
      font-size: var(--text-sm);
      color: var(--color-pow-red);

      & li {
        padding-inline-start: var(--space-4);
        position: relative;
        margin-block-end: var(--space-1);

        &::before {
          content: "!";
          position: absolute;
          left: 0;
          font-weight: var(--font-bold);
        }
      }
    }
  }

  /* ==========================================================================
     Checkbox Label (inline style)
     ========================================================================== */

  .checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-weight: var(--font-bold);

    & input[type="checkbox"] {
      appearance: none;
      inline-size: var(--space-4);
      block-size: var(--space-4);
      background-color: var(--color-surface);
      border: var(--border-medium) solid var(--color-comic-border);
      box-shadow: 2px 2px 0 var(--comic-shadow-color);
      cursor: pointer;
      position: relative;
      transition: transform 0.15s ease, background-color 0.15s ease;

      &:hover {
        transform: scale(1.1);
      }

      &:checked {
        background-color: var(--color-wham-blue);
      }

      &:checked::after {
        content: "";
        position: absolute;
        inset: 1px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
  }

  /* ==========================================================================
     Input Group (prefix/suffix) - Pop Art style
     ========================================================================== */

  .input-group {
    display: flex;
    align-items: stretch;

    & .input-prefix,
    & .input-suffix {
      padding: var(--space-2_5) var(--space-3);
      background-color: var(--color-border-muted);
      border: var(--border-thick) solid var(--color-comic-border);
      color: var(--color-ink-muted);
      font-size: var(--text-base);
      font-weight: var(--font-bold);
      display: flex;
      align-items: center;
    }

    & .input-prefix {
      border-inline-end: none;
    }

    & .input-suffix {
      border-inline-start: none;
    }

    & input {
      flex: 1;
      border-radius: 0 !important;
    }

    & .input-prefix + input {
      border-inline-start: none;
    }

    & input:has(+ .input-suffix) {
      border-inline-end: none;
    }

    /* Box shadow only on the entire group, not individual parts */
    box-shadow: var(--comic-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;

    &:focus-within {
      transform: translate(-1px, -1px);
      box-shadow: 5px 5px 0 var(--comic-shadow-color);
    }

    & input {
      box-shadow: none;

      &:focus {
        transform: none;
        box-shadow: none;
        border-color: var(--color-wham-blue);
      }
    }
  }

  /* ==========================================================================
     Input with Suffix Flag - Pop Art style
     A small "flag" suffix that attaches to the top-right of an input
     ========================================================================== */

  .input-with-suffix {
    display: flex;
    align-items: flex-start;
  }

  .input-with-suffix input,
  .input-with-suffix .form-control {
    width: 100px;
  }

  .input-suffix {
    padding: var(--space-1) var(--space-2);
    margin-inline-start: -3px;
    background: var(--color-zap-yellow);
    border: var(--border-medium) solid var(--color-comic-border);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: black;
    box-shadow: 2px 2px 0 var(--comic-shadow-color);
  }

  /* ==========================================================================
     Form Select - Pop Art dropdown
     ========================================================================== */

  .form-select {
    inline-size: 100%;
    padding: var(--space-2_5) var(--space-3);
    border: 4px solid var(--color-comic-border);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    background-color: var(--color-surface);
    color: var(--color-ink);
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--comic-shadow-color);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;

    &:focus {
      outline: none;
      border-color: #3B82F6;
      transform: translate(-1px, -1px);
      box-shadow: 5px 5px 0 var(--comic-shadow-color);
    }
  }

  /* ==========================================================================
     Form Textarea - Pop Art style
     ========================================================================== */

  .form-textarea {
    inline-size: 100%;
    padding: var(--space-2_5) var(--space-3);
    border: 4px solid var(--color-comic-border);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    background-color: var(--color-surface);
    color: var(--color-ink);
    resize: vertical;
    min-block-size: 80px;
    box-shadow: 4px 4px 0 var(--comic-shadow-color);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;

    &:focus {
      outline: none;
      border-color: #3B82F6;
      transform: translate(-1px, -1px);
      box-shadow: 5px 5px 0 var(--comic-shadow-color);
    }
  }

  /* ==========================================================================
     Form Input - Pop Art style (standalone class)
     ========================================================================== */

  .form-input {
    inline-size: 100%;
    padding: var(--space-2_5) var(--space-3);
    border: 4px solid var(--color-comic-border);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    background-color: var(--color-surface);
    color: var(--color-ink);
    box-shadow: 4px 4px 0 var(--comic-shadow-color);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;

    &:focus {
      outline: none;
      border-color: #3B82F6;
      transform: translate(-1px, -1px);
      box-shadow: 5px 5px 0 var(--comic-shadow-color);
    }

    &::placeholder {
      color: var(--color-ink-faint);
      font-weight: var(--font-normal);
    }
  }

  /* ==========================================================================
     Form Container - Card style
     ========================================================================== */

  .form-container {
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
    padding: var(--space-6);
  }

  /* ==========================================================================
     Fieldset - Pop Art bordered section
     ========================================================================== */

  fieldset {
    border: var(--border-thick) solid var(--color-comic-border);
    padding: var(--space-4);
    margin-block-start: var(--space-4);
    background: var(--color-surface);

    & legend {
      font-weight: var(--font-bold);
      text-transform: uppercase;
      padding-inline: var(--space-2);
      background: var(--color-zap-yellow);
      border: var(--border-medium) solid var(--color-comic-border);
    }

    &.hidden {
      display: none;
    }
  }

  /* ==========================================================================
     Search Input with Icon
     ========================================================================== */

  .search-input {
    position: relative;

    & input {
      padding-inline-start: var(--space-9);
    }

    & .search-icon {
      position: absolute;
      left: var(--space-3);
      top: 50%;
      transform: translateY(-50%);
      color: var(--color-ink-muted);
      pointer-events: none;
    }

    & .search-clear {
      position: absolute;
      right: var(--space-3);
      top: 50%;
      transform: translateY(-50%);
      color: var(--color-ink-muted);
      cursor: pointer;
      transition: color 0.15s ease;

      &:hover {
        color: var(--color-pow-red);
      }
    }
  }

  /* ==========================================================================
     Tag Input
     ========================================================================== */

  .tag-input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1_5);
    padding: var(--space-2);
    border: var(--border-thick) solid var(--color-comic-border);
    background-color: var(--color-surface);
    box-shadow: var(--comic-shadow-sm);

    & .tag {
      display: flex;
      align-items: center;
      gap: var(--space-1);
      background-color: var(--color-wham-blue);
      color: white;
      font-weight: var(--font-bold);
      font-size: var(--text-xs);
      padding: var(--space-0_5) var(--space-2);
      border: var(--border-thin) solid var(--color-comic-border);

      & button {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: none;
        border: none;
        color: inherit;
        cursor: pointer;

        &:hover {
          color: var(--color-pow-red);
        }
      }
    }

    & input {
      flex: 1;
      min-width: 80px;
      border: none;
      background: transparent;
      outline: none;
      font-size: var(--text-sm);
      color: var(--color-ink);

      &::placeholder {
        color: var(--color-ink-faint);
      }
    }
  }

  /* ==========================================================================
     File Upload / Dropzone
     ========================================================================== */

  .dropzone {
    border: var(--border-thick) dashed var(--color-border);
    padding: var(--space-6);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;

    &:hover {
      border-color: var(--color-wham-blue);
      background-color: light-dark(oklch(0.97 0.02 250), oklch(0.22 0.04 250));
    }

    & .dropzone-icon {
      color: var(--color-ink-muted);
      margin-block-end: var(--space-2);
    }

    & .dropzone-text {
      font-weight: var(--font-bold);
      font-size: var(--text-sm);
    }

    & .dropzone-hint {
      font-size: var(--text-xs);
      color: var(--color-ink-muted);
    }
  }

  /* ==========================================================================
     Range Slider
     ========================================================================== */

  .range-slider {
    & .range-header {
      display: flex;
      justify-content: space-between;
      margin-block-end: var(--space-1);

      & .range-label {
        font-weight: var(--font-bold);
        font-size: var(--text-sm);
      }

      & .range-value {
        font-weight: var(--font-bold);
        font-size: var(--text-sm);
        color: var(--color-kapow-pink);
      }
    }

    & .range-track {
      position: relative;
      height: var(--space-6);
      display: flex;
      align-items: center;
    }

    & .range-bg {
      position: absolute;
      width: 100%;
      height: 12px;
      background-color: var(--color-border-muted);
      border: var(--border-thick) solid var(--color-comic-border);
    }

    & .range-fill {
      position: absolute;
      height: 12px;
      background-color: var(--color-kapow-pink);
      border-block: var(--border-thick) solid var(--color-comic-border);
      border-inline-start: var(--border-thick) solid var(--color-comic-border);
    }

    & input[type="range"] {
      position: absolute;
      width: 100%;
      height: 12px;
      opacity: 0;
      cursor: pointer;
    }

    & .range-thumb {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: var(--color-zap-yellow);
      border: var(--border-thick) solid var(--color-comic-border);
      box-shadow: 2px 2px 0 var(--comic-shadow-color);
      pointer-events: none;
    }
  }

  /* ==========================================================================
     Specific Form Containers
     ========================================================================== */

  .project-form,
  .team-member-form,
  .billing-plan-form {
    max-inline-size: var(--max-width-2xl);
  }
}