/* ============================================
   FORM PAGE - Shared layout & theme for form pages
   (new-company, create-position, etc.)
   ============================================ */

@layer components {
  .form-page {
    /* Layout */
    .page-layout {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xl);
      align-items: flex-start;
    }

    .form-area {
      flex: 1;
      min-inline-size: 320px;
    }

    .sidebar {
      flex-shrink: 0;
      inline-size: 100%;
      max-inline-size: 320px;
      display: flex;
      flex-direction: column;
      gap: var(--space-xl);
    }

    /* Error banner */
    .error-banner {
      display: flex;
      align-items: flex-start;
      gap: var(--space-md);
      padding: var(--space-lg);
      border-radius: 12px;
      margin-block-end: var(--space-xl);
      font-size: var(--fs-small);
      line-height: 1.5;

      svg {
        flex-shrink: 0;
        margin-block-start: 2px;
      }

      strong {
        display: block;
        margin-block-end: var(--space-3xs);
      }

      a {
        font-weight: var(--fw-semibold);
        text-decoration: underline;
        text-underline-offset: 2px;
      }
    }

    /* Card */
    .card {
      padding: var(--space-2xl);
      border-radius: 16px;
      transition: border-color 0.3s ease-out;
    }

    .card-header {
      margin-block-end: var(--space-xl);

      h2 {
        font-size: var(--fs-xl);
        font-weight: var(--fw-semibold);
        letter-spacing: -0.01em;
        margin-block-end: var(--space-3xs);
      }

      .card-hint {
        font-size: var(--fs-xsmall);
      }
    }

    /* Form groups */
    .form-group {
      margin-block-end: var(--space-xl);

      label {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        font-size: var(--fs-small);
        font-weight: var(--fw-medium);
        margin-block-end: var(--space-sm);

        svg {
          flex-shrink: 0;
          opacity: 0.6;
        }
      }

      input,
      select,
      textarea {
        inline-size: 100%;
        padding: var(--space-compact) var(--space-md);
        border-radius: 10px;
        font-size: var(--fs-body);
        transition: all 0.2s ease-out;
      }

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

      .field-hint {
        display: block;
        font-size: var(--fs-xsmall);
        color: var(--text-secondary);
        margin-block-start: var(--space-3xs);
      }
    }

    .form-row {
      display: flex;
      gap: var(--space-lg);

      .form-group {
        flex: 1;
        min-inline-size: 140px;
      }
    }

    /* Details / accordion */
    .additional-details {
      margin-block-end: var(--space-xl);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s ease-out;

      summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-md) var(--space-lg);
        cursor: pointer;
        list-style: none;
        font-weight: var(--fw-medium);
        font-size: var(--fs-small);
        transition: all 0.2s ease-out;

        &::-webkit-details-marker {
          display: none;
        }
      }

      .summary-left {
        display: flex;
        align-items: center;
        gap: var(--space-xs);

        svg {
          transition: transform 0.3s ease-out;
        }
      }

      &[open] .summary-left svg {
        transform: rotate(45deg);
      }

      .field-count {
        font-size: var(--fs-xsmall);
      }

      .details-content {
        padding: var(--space-md) var(--space-lg) var(--space-lg);
      }
    }

    /* Submit button */
    .submit-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-xs);
      padding: var(--space-compact) var(--space-2xl);
      border-radius: 100px;
      font-size: var(--fs-body);
      font-weight: var(--fw-semibold);
      cursor: pointer;
      transition: all 0.25s ease-out;
      border: none;
      inline-size: 100%;

      svg {
        transition: transform 0.25s ease-out;
      }

      &:hover svg {
        transform: rotate(90deg);
      }
    }

    /* Sidebar cards */
    .sidebar .card {
      h3 {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-size: var(--fs-body);
        font-weight: var(--fw-semibold);
        margin-block-end: var(--space-lg);

        svg {
          flex-shrink: 0;
          opacity: 0.7;
        }
      }
    }

    /* Steps */
    .steps {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }

    .step {
      display: flex;
      gap: var(--space-md);
      align-items: center;
      padding: var(--space-compact) var(--space-md);
      border-radius: 10px;
      transition: all 0.2s ease-out;

      strong {
        display: block;
        font-size: var(--fs-small);
        margin-block-end: var(--space-4xs);
      }

      p {
        font-size: var(--fs-xsmall);
      }
    }

    .step-number {
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 32px;
      block-size: 32px;
      border-radius: 50%;
      font-size: var(--fs-small);
      font-weight: var(--fw-semibold);
      flex-shrink: 0;
      transition: all 0.2s ease-out;
    }

    /* Tips */
    .tips-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);

      li {
        font-size: var(--fs-small);
        line-height: 1.5;
        padding-inline-start: var(--space-md);
        position: relative;

        &::before {
          content: '';
          position: absolute;
          inset-inline-start: 0;
          inset-block-start: 0.6em;
          inline-size: 6px;
          block-size: 6px;
          border-radius: 50%;
        }
      }
    }
  }
}

/* --- THEME --- */
@layer theme {
  .form-page {
    .error-banner {
      background: light-dark(
        oklch(from var(--color-error) l c h / 0.08),
        oklch(from var(--color-error) l c h / 0.12)
      );
      border: 1px solid
        light-dark(
          oklch(from var(--color-error) l c h / 0.2),
          oklch(from var(--color-error) l c h / 0.25)
        );
      color: light-dark(
        oklch(from var(--color-error) calc(l - 0.1) c h),
        oklch(from var(--color-error) calc(l + 0.15) c h)
      );

      a {
        color: inherit;
        &:hover {
          opacity: 0.8;
        }
      }
    }

    .form-group {
      input,
      textarea {
        &::placeholder {
          color: oklch(50% 0.01 250);
        }

        &:focus {
          box-shadow:
            0 0 0 3px var(--input-focus-shadow),
            0 2px 8px oklch(from var(--accent-primary) l c h / 0.1);
        }
      }
    }

    .additional-details {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

      &:hover {
        border-color: oklch(from var(--accent-primary) l c h / 0.2);
      }

      summary {
        color: var(--text-primary);

        &:hover {
          background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
        }
      }

      .field-count {
        color: var(--text-secondary);
      }

      .details-content {
        border-block-start: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      }

      .summary-left svg {
        color: light-dark(
          oklch(from var(--accent-primary) l calc(c - 0.03) h),
          oklch(from var(--accent-primary) calc(l + 0.1) calc(c - 0.03) h)
        );
      }
    }

    /* Steps */
    .step {
      &:hover {
        background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.04));
      }

      strong {
        color: var(--text-primary);
      }
      p {
        color: var(--text-secondary);
      }
    }

    .step-number {
      background: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.06));
      border: 1px solid light-dark(oklch(0% 0 0 / 0.08), oklch(100% 0 0 / 0.1));
      color: var(--text-secondary);
    }

    .step--active {
      background: light-dark(
        oklch(from var(--accent-primary) l c h / 0.06),
        oklch(from var(--accent-primary) l c h / 0.08)
      );

      .step-number {
        background: light-dark(
          oklch(from var(--accent-primary) l c h / 0.12),
          oklch(from var(--accent-primary) l c h / 0.2)
        );
        border-color: light-dark(
          oklch(from var(--accent-primary) l c h / 0.2),
          oklch(from var(--accent-primary) l c h / 0.3)
        );
        color: light-dark(
          oklch(from var(--accent-primary) calc(l - 0.05) calc(c - 0.03) h),
          oklch(from var(--accent-primary) calc(l + 0.15) calc(c - 0.05) h)
        );
      }

      strong {
        color: light-dark(
          oklch(from var(--accent-primary) calc(l - 0.05) calc(c - 0.03) h),
          oklch(from var(--accent-primary) calc(l + 0.15) calc(c - 0.05) h)
        );
      }
    }

    /* Tips */
    .tips-list {
      li {
        color: var(--text-secondary);

        strong {
          color: var(--text-primary);
        }

        &::before {
          background: var(--accent-primary);
        }
      }
    }
  }
}